O que acontece com o StrictMode no React?

No React, o StrictMode tem um comportamento feito para garantir que seja compatível com o estado reutilizável.

Quando o StrictMode está ativo (com a tag), o React chama efeitos de atualização dupla (montar -> desmontar -> montar) para componentes recém-montados. Isso é feito para garantir que o componente seja resiliente a ser "montado" e "desmontado" mais de uma vez.

Assim como outros comportamentos de StrictMode, o React só faz isso para compilações em modo desenvolvimento.

Vamos ver o exemplo abaixo

Demo strictMode

O componente <App /> acima declara alguns efeitos para serem executados na montagem e desmontagem. Antes do React 18, as funções de configuração executavam apenas uma vez (após o componente ser montado inicialmente) e as funções de limpeza também executavam apenas uma vez (após o componente ser desmontado).

No código acima o que acontece o seguinte:

• React renderiza o componente ( 2x )
• React monta o componente
• O código de configuração do efeito de layout é executado
• O código de configuração do efeito é executado
• React simula o componente sendo escondido ou desmontado
• O código de limpeza do efeito de layout é executado
• O código de limpeza do efeito é executado
• React simula o componente sendo mostrado novamente ou remontado
• O código de configuração do efeito de layout é executado
• O código de configuração do efeito é executado

Quando os componentes são encapsulados StrictMode, o React executa certas funções duas vezes para ajudar os desenvolvedores a detectar erros em seu código.

Como o StrictMode pode ser útil?

Vamos ver um exemplo em que o StrictMode nos ajuda a encontrar um erro grave.

Mas qual é o problema com o exemplo acima?

Você deve ter notado que os botões não funcionam como esperado, eles não alternam o isActive de truepara falsesempre que clicamos nele e o problema é que a função de atualização passada para o setChecked() é uma função pura, e ela altera um objeto no estado. Como a função está sendo chamada duas vezes e não é uma função pura, na nossa segunda chamada ela reverte o booleano de volta ao seu valor original.

E só devido à invocação dupla do StrictMode que nós conseguimos encontrar esse erro. Se removermos o StrictMode, o componente funcionaria como desejado, mas isso não significa que o código foi criado corretamente, ele só funciona devido ao quão isolado é o componente e, em cenários reais, mutações como essas podem causar sérios problemas.

Se você alterar a função para uma função pura, ele resolverá o problema, basta alterar o trecho de código da linha 13 para este abaixo:

Pure Function Example

O StrictMode nos facilita no desenvolvimento para evitar erros de programação, onde ele nos ajuda a validar o tempo de execução de cada alteração de estado.

Esse conteúdo e outros conteúdos avançados de React você encontra no Curso React para Unicórnios nesse link!