[React Hook] useState

Estranhamente, a comunidade React adora coisas com 'use' no nome.

useServer, useCallback, useState, useMemo, etc.

Até os hooks personalizados usam 'use'.

De onde isso surgiu?

useState é um hook famoso.

Armazena valores de estado e, quando eles mudam, o componente é re-renderizado. Bem simples.

É aquele exemplo que todo mundo conhece.

Se o valor do estado muda, o componente é re-renderizado, mas qual é o escopo dessa re-renderização?

Só a tag <p>? Ou a tag <button> também?

A resposta é: todo o componente onde useState foi chamado.

ExampleComponent é re-renderizado,

mas o Virtual DOM compara os valores e só atualiza as partes que realmente mudaram.

useState é chamado a cada re-renderização, então como o valor é mantido?

A resposta está na estrutura do useState.

Este é o código real do useState do React.

Ele pega o dispatcher de um objeto global e chama useState.

Só com isso, a estrutura não fica clara.

Se cavarmos mais fundo, encontramos este código:

Ele pega o hook, e a função set é criada usando bind com a fila (queue) do hook.

(bind liga o this a uma função existente, passa outros argumentos para a função e retorna uma nova função com o this ligado).

Ainda assim, é difícil entender o motivo.

Vamos cavar mais fundo.

Podemos ver que o valor inicial é atribuído a cada vez. Isso não explica como o estado é mantido.

Vamos investigar mais a fundo. O hook parece suspeito.

currentlyRenderingFiber e workInProgressHook são variáveis globais.

Ele usa a atribuição da direita para a esquerda para implementar uma lista ligada.

Então, a estrutura do hook deve ser algo assim:

Valores são adicionados à frente da lista.

Ainda não está claro, então olhei para outras implementações de useState.

Não era só mountState que era chamado, mas updateState e rerenderState também eram chamados quando o componente era re-renderizado.

Portanto, a estrutura é como mostrada acima, e diferentes funções são chamadas dependendo do evento.

Se você quiser ver o código, consulte react/packages/react-reconciler/src/ReactFiberHooks.js.