[React Hook] useState

Curiosamente, a la comunidad de React le encanta usar 'use' en las funciones.

useServer, useCallback, useState, useMemo, etc.

Incluso los hooks personalizados llevan 'use'.

¿De dónde surgió esto?

useState es un hook famoso.

Almacena valores de estado y vuelve a renderizar cuando estos cambian. Es muy simple.

Es el ejemplo que todos conocemos.

¿Si el valor del estado cambia, se vuelve a renderizar, pero cuál es el alcance de este re-renderizado?

¿Solo la etiqueta p? ¿O también la etiqueta button?

La respuesta es que se vuelve a renderizar todo el componente donde se llamó a useState.

Se vuelve a renderizar ExampleComponent, pero

se utiliza el DOM virtual para comparar los valores y modificar solo las partes necesarias del DOM.

¿useState se llama en cada renderizado, pero cómo se mantiene el valor?

La respuesta se encuentra en la estructura de useState.

Este código es el código real de useState de React.

Obtiene el dispatcher del objeto global y llama a useState.

Con esto no se entiende la estructura.

Si profundizamos más, encontramos el siguiente código.

Obtiene el hook y le pasa directamente la función set a la cola (queue) del hook usando bind.

(bind une this a la función existente, usa los demás argumentos como argumentos de la función y devuelve una nueva función con this unido).

Con esto es difícil entender la razón.

Profundicemos más.

Se puede ver que se asigna el valor init en cada ocasión. Esto no explica por qué se mantiene el estado.

Profundicemos más. El hook parece sospechoso.

currentlyRenderingFiber y workInProgressHook son variables globales.

Se utiliza la asignación desde la derecha para implementar una lista enlazada.

Por lo tanto, se espera que la estructura del hook sea la siguiente.

Se puede ver que los valores se van agregando al principio.

Sin embargo, después de ver otras implementaciones de useState,

no todas llaman a mountState, sino que llaman a updateState y rerenderState cuando se vuelve a renderizar.

Por lo tanto, la estructura es la que se muestra arriba, y se llaman diferentes funciones según el evento.

Si quieres ver el código directamente, puedes consultar react/packages/react-reconciler/src/ReactFiberHooks.js.