Compreendendo as renderizações duplas em useState

No React, o gancho useState é comumente usado para gerenciar o estado do componente. No entanto, sob certas condições, você pode perceber que um componente renderizado com useState é renderizado duas vezes para cada atualização de estado. Esse comportamento confundiu muitos desenvolvedores que não ativaram o Modo Estrito. Por que isso ocorre?

A função do modo estrito

Ao contrário da suposição de que o modo estrito não está ativado, seu código está realmente sendo executado sob suas restrições. Por padrão, as versões modernas do React envolvem implicitamente o componente mais externo em um elemento . Este modo aprimora a depuração e destaca possíveis problemas de desempenho.

Invocação de função dupla no modo estrito

A documentação do React afirma explicitamente que o modo estrito "invoca duas vezes" intencionalmente certas funções, incluindo as funções do atualizador de estado passadas para setState e useState. Isso significa que sempre que você chamar setNumber em seu código, ele será invocado duas vezes.

Consequências da invocação dupla

Essa invocação dupla faz com que o componente seja renderizado duas vezes. Esse comportamento tem como objetivo ajudar os desenvolvedores a identificar possíveis efeitos colaterais, tornando-os mais determinísticos. Por padrão, o React adia as atualizações ao usar o gancho useState. No entanto, o Modo Estrito ignora esse comportamento, fazendo com que a renderização ocorra duas vezes.

Conclusão

Em resumo, a renderização dupla de componentes usando useState é uma consequência da execução do seu código no modo estrito do React. Embora possa parecer inesperado, esse comportamento é intencional e projetado para aprimorar os recursos de depuração, tornando os efeitos colaterais mais aparentes.