Há vários dias fui ajustado para um novo departamento. Meu novo colega de trabalho me deu a tarefa de refatorar um projeto React existente.

Quando estava lendo o código, fiquei chocado com a forma de usar a API Context. O codificador anterior, que colocou tudo (sim, quase tudo) em um objeto Context, tratou-o como um armazenamento para gerenciar todos os estados e até mesmo algum estado temporário local. Isso é loucura!

E ele também codifica tudo para uma página em apenas um (sim, absolutamente apenas um) componente em um arquivo .ts. É muito difícil para mim deixar claro em minha mente a lógica do código. Mas eu ainda aceito esses códigos de merda (não tenho escolha), então tomo uma grande decisão: reescreveria todas essas páginas em uma semana com Mobx e dividiria o código em diferentes componentes funcionais.

Com Mobx, eu crio vários armazenamentos para lidar com todos os dados das APIs e divido um componente enorme em diferentes pequenos pedaços; tudo começa a ficar claro e simples. O estado local deverá estar no seu escopo onde será utilizado, a parte comum será adquirida na loja da Mobx.

Finalmente removi totalmente o objeto Context, milhares de linhas de código foram removidas e o mundo ficou quieto novamente!

Quero dizer algo sobre a API Context. Se você realmente tem algo, como algumas informações de configuração global para compartilhar com todo o aplicativo, você pode usar a API Context, mas se quiser apenas evitar o uso de alguma biblioteca de gerenciamento de estado de terceiros, é uma má ideia tratar o contexto como um substituição.

Deixe Context ser Context e deixe o estado ser gerenciado por bibliotecas como Mobx.

Pare de abusar da API React Context, por favor!