Como Configurar o React Context

O prop drilling estraga o seu código. Você passa dados por cinco camadas de componentes que não precisam deles. O React Context resolve isso. No entanto, a maioria das configurações cria um novo problema.

Quando você usa o "Go to Definition" em um hook de contexto, muitas vezes acaba em um arquivo que não tem nada além de uma pequena chamada de useContext. A lógica real reside em um arquivo diferente. Você passa o dia procurando pela lógica de estado.

Você pode corrigir isso com uma estrutura melhor.

Siga este padrão:

  • Coloque o contexto, o hook público e a lógica de estado em um único arquivo.
  • Mantenha o Provider como uma camada fina.
  • Use uma regra de lint para proteger sua lógica privada.

Estruture seus arquivos desta forma:

src/context/ • GameContext.ts (Contexto, hook público e lógica de estado) • GameProvider.tsx (Uma camada fina)

Dentro de GameContext.ts, crie três partes:

  1. O objeto de contexto.
  2. Um hook público para os componentes usarem. Este hook deve lançar um erro se o contexto for nulo. Isso garante que seus componentes falhem rapidamente se estiverem fora do provider.
  3. Um hook privado para gerenciamento de estado. Este hook contém suas chamadas de useState ou useReducer.

Ao colocar o hook público e a lógica privada no mesmo arquivo, o "Go to Definition" funciona perfeitamente. Você pula diretamente do componente para a lógica.

Existe um risco. Como o hook privado é exportado para que o Provider possa usá-lo, um colega de equipe pode chamá-lo no lugar errado. Se isso acontecer, ele criará um estado novo e isolado em vez de usar o contexto compartilhado.

Pare de usar comentários para evitar isso. Use uma regra de ESLint em vez disso.

Eu criei o eslint-plugin-restrict-callers para resolver isso. Você pode definir quais funções têm permissão para chamar hooks específicos.

Por exemplo, você pode dizer ao ESLint que apenas o GameProvider pode chamar o useGameStateManagement. Se qualquer outra pessoa tentar, o build falhará com uma mensagem de erro clara.

Resumo do fluxo de trabalho:

  • Agrupe contexto, hooks públicos e lógica privada em um único arquivo.
  • Use o Provider apenas para passar o resultado do hook para o valor do provider.
  • Lance erros no hook público se o contexto estiver ausente.
  • Use o ESLint para impor limites entre hooks públicos e privados.

Fonte: https://dev.to/jareddlewis/how-to-set-up-react-context-2c9h