Você não aguenta mais passar estados como props de um componente para outro? Ou está fazendo a transição do Redux para o Context e não sabe por onde começar? Então este resumo é para você!
Em uma nova pasta, você terá dois arquivos: um para o context e outro para o provider. No context, a estrutura é a seguinte:
import { createContext } from 'react';
const ContextName = createContext();
export default ContextName;
O nome do contexto é escolha sua, mas lembre-se de começar com letra maiúscula, a mesma regra serve para o Provider.
O Provider pode ser criado como um componente funcional, na seguinte estrutura:
function WordProvider({ children }) {
return (
<ContextName.Provider value={ data }>
{ children }
</ContextName.Provider>
);
}
É preciso importar o React, o Context que você criou no passo anterior, além de useState e talvez o useEffect.
useState servirá para você criar os estados da sua aplicação, da seguinte forma:
const [data, setData] = useState('');
Sendo "data" o nome de um estado e "setData" a função que o altera. Lembrando que isso é apenas um exemplo e você poderia criar vários estados em vez de apenas um.
O useEffect será necessário, por exemplo, caso você utilize alguma função assíncrona para estabelecer o valor do estado.
Para aplicações pequenas, é comum aplicar o Provider como elemento-pai de todos os componentes, sendo assim, seu App.js ficará da seguinte forma:
function App() {
return (
<ProviderName>
<Component1 />
<Component2 />
<Component3 />
</ProviderName>
);
}
Pronto, agora todos os componentes têm acesso ao seu estado, basta importá-lo onde quiser usá-lo com: const data = useContext(ContextName);
Para você observar na prática, recomendo uma simples aplicação na qual estou trabalhando: Termo's Clone.