Neste artigo, veremos como se livrar do React.Context em seus aplicativos e encontrar uma motivação para fazer isso.

Você provavelmente está familiarizado com React e pode já ter tido experiência com React.Context se acessou este artigo, mas se não, sinta-se à vontade para lê-lo de qualquer maneira e compartilhar com pessoas que possam estar interessadas.

1. Por que evitar React.Context?

O contexto degrada a legibilidade, emaranha e restringe o aplicativo.

Basta dar uma olhada neste exemplo básico:

Não parece muito compreensível e confiável, não é?

Aqui estão alguns possíveis problemas ao usar contextos:

1. Quanto mais contextos forem usados, menos legível e controlável seu aplicativo se tornará;
2. Às vezes, contextos aninhados exigem uma ordem correta para funcionar, o que torna seu aplicativo difícil de manter;
3. Alguns contextos devem ser reutilizados durante a configuração de um ambiente de teste para continuar funcionando corretamente;
4. Você precisa ter certeza de que o componente é filho da árvore de um provedor de contexto necessário.

Curiosidade: o conhecido "inferno da promessa" é parecido ?‍♂️

loadClients()
  .then((client) => {
    return populate(client)
      .then((clientPopulated) => {
        return commit(clientPopulated);
      });
  });

2. Como substituir React.Context?

Crie ganchos.

Vamos substituir ThemeContext do exemplo acima por um gancho useTheme personalizado:

import { useAppEvents } from 'use-app-events';

const useTheme = () => {
  const [theme, setTheme] = useState('dark');

  /** Set up communication between the instances of the hook. */
  const { notifyEventListeners, listenForEvents } = useAppEvents();

  listenForEvents('theme-update', (themeNext: string) => {
    setTheme(themeNext);
  });

  const updateTheme = (themeNext: string) => {
    setTheme(themeNext);

    notifyEventListeners('theme-update', themeNext);
  };

  return {
    theme,
    updateTheme,
  };
};

Usamos um pacote npm chamado use-app-events para permitir que todas as instâncias do gancho useTheme se comuniquem para sincronizar o estado do tema. Ele garante que o valor do tema será o mesmo quando useTheme for chamado várias vezes no aplicativo.

Além disso, graças ao pacote use-app-events, o tema será sincronizado mesmo entre as guias do navegador.

Neste ponto, ThemeContext não é mais necessário, pois o gancho useTheme pode ser usado em qualquer lugar do aplicativo para obter o tema atual e atualizá-lo:

const App = () => {
  const { theme, updateTheme } = useTheme();

  updateTheme('light');

  // Output: 
Current theme: light
  return 
Current theme: {theme}
;
}

Quais são as vantagens da abordagem:

1. Não há necessidade de colocar um gancho em algum lugar no alto da árvore antes que as crianças possam usá-lo (incluindo ambientes de teste);
2. A estrutura de renderização é mais limpa, o que significa que não há mais estrutura confusa em forma de seta construída a partir de seus contextos;
3. O estado é sincronizado entre as guias.

Conclusão

React.Context era uma ferramenta poderosa há algum tempo, com certeza, mas os ganchos fornecem uma maneira mais controlada e confiável de gerenciar o estado global do seu aplicativo se implementados corretamente em conjunto com o pacote use-app-events.