Context API

Question 1

O que é Context API

Answer 1

É um recurso que compartilha o estado da aplicação entre todos os componentes dentro do mesmo contexto pra não precisar passar props em niveis elevados de hieraquia.

é uma alternativa a ficar passando props

Question 2

Context API

Answer 2

Geralmente colocamos no inicio da aplicação, dentro de APP.js ou Index.js

Question 3

Context API

Answer 3

Geralmente ficam na pasta src/context/

Question 4

Criar um contexto,e já setar com um valor padrão de 1

Answer 4

import { createContext } from 'react';

export const seuContexto= createContext(1);

Question 5

Usar um contexto

Answer 5

Import o useContext Hook de React e o seu  contexto 'seuContexto.js':

import { useContext } from 'react';
import { seuContexto} from './seuContexto.js';


const level = useContext(seuContexto);

//Utilizar o useContext(seuContexto), diz ao React que o componente quer ler o contexto seuContexto 

Question 6

Para que o contexto seja vinculado a um componente, esse componente precisa está cercado por um provider do contexto especifico

Answer 6

 <section className="section">
      <LevelContext.Provider value={level}>
        {children}
      </LevelContext.Provider>
  </section>

This tells React: “if any component inside this <Section> asks for LevelContext, give them this level.” The component will use the value of the nearest <LevelContext.Provider> in the UI tree above it.

Question 7

O que é prop drilling

Question 8

Quando usar Contexto 1

Answer 8

Theming: If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in components that need to adjust their visual look.

Question 9

Quando usar Contexto 2

Answer 9

Current account: Many components might need to know the currently logged in user. Putting it in context makes it convenient to read it anywhere in the tree. Some apps also let you operate multiple accounts at the same time (e.g. to leave a comment as a different user). In those cases, it can be convenient to wrap a part of the UI into a nested provider with a different current account value.

Question 10

Quando usar Contexto 3

Answer 10

Routing: Most routing solutions use context internally to hold the current route. This is how every link “knows” whether it’s active or not. If you build your own router, you might want to do it too.

Question 11

Quando usar Contexto 4

Answer 11

Managing state: As your app grows, you might end up with a lot of state closer to the top of your app. Many distant components below may want to change it. It is common to use a reducer together with context to manage complex state and pass it down to distant components without too much hassle.

Question 12

Recap

Answer 12

Context lets a component provide some information to the entire tree below it.
To pass context:

Create and export it with export const MyContext = createContext(defaultValue).
Pass it to the useContext(MyContext) Hook to read it in any child component, no matter how deep.

Wrap children into <MyContext.Provider value={...}> to provide it from a parent.
Context passes through any components in the middle.

Context lets you write components that “adapt to their surroundings”.

Before you use context, try passing props or passing JSX as children.