Comprensión de los renderizados dobles en useState

En React, el gancho useState se usa comúnmente para administrar el estado de los componentes. Sin embargo, bajo ciertas condiciones, es posible que observe que un componente renderizado con useState se renderiza dos veces para cada actualización de estado. Este comportamiento ha confundido a muchos desarrolladores que no han habilitado el modo estricto. ¿Por qué ocurre esto?

La función del modo estricto

Contrariamente a la suposición de que el modo estricto no está habilitado, su código en realidad se ejecuta bajo sus restricciones. De forma predeterminada, las versiones modernas de React envuelven implícitamente el componente más externo en un elemento . Este modo mejora la depuración y resalta posibles problemas de rendimiento.

Invocación de doble función en modo estricto

La documentación de React establece explícitamente que el modo estricto intencionalmente "invoca dos veces" ciertas funciones, incluidas las funciones de actualización de estado pasadas a setState y useState. Esto significa que cada vez que llamas a setNumber en tu código, se invoca dos veces.

Consecuencias de la doble invocación

Esta doble invocación lleva a que el componente se represente dos veces. Este comportamiento tiene como objetivo ayudar a los desarrolladores a detectar posibles efectos secundarios haciéndolos más deterministas. De forma predeterminada, React pospone las actualizaciones cuando usa el gancho useState. Sin embargo, el modo estricto evita este comportamiento, lo que hace que el renderizado se produzca dos veces.

Conclusión

En resumen, el renderizado doble de componentes que utilizan useState es una consecuencia de ejecutar su código en el modo estricto de React. Si bien puede parecer inesperado, este comportamiento es intencional y está diseñado para mejorar las capacidades de depuración al hacer que los efectos secundarios sean más evidentes.