React HooksExplained

24 of 24 rows

Hook↕	O que faz↕	Use para↕
Estado
⤢useState	Guarda um único valor que despoleta um novo render quando muda.	Estado local do componente: campos de formulário, toggles, contadores.
⤢useReducer	Guarda estado dirigido por um reducer de ações, como uma pequena store.	Estado com vários campos relacionados ou transições complexas.
⤢useRef	Guarda um valor mutável que NÃO despoleta um novo render.	Contentores mutáveis, timers e acesso direto ao DOM via .current.
Efeitos
⤢useEffect	Executa um efeito secundário após o render, com limpeza opcional.	Buscar dados, subscrições e sincronização com um sistema externo.
⤢Effect cleanup	A função que um efeito devolve corre antes do próximo efeito e de novo no unmount.	Fechar subscrições e timers, ou abortar um fetch em curso.
⤢useLayoutEffect	Como useEffect, mas dispara de forma síncrona após a mutação do DOM.	Ler ou escrever layout antes de o navegador pintar (toasts, tooltips).
⤢useEffect vs handlers	Os event handlers correm em resposta a uma ação do utilizador; os efeitos correm após o render para sincronizar.	Lógica causada pelo utilizador pertence a um handler; lógica causada pelo render pertence a um efeito.
⤢StrictMode	Em desenvolvimento, monta os componentes duas vezes para os efeitos correrem, limparem e correrem de novo.	Apanhar subscrições duplas e limpezas em falta antes da produção.
Desempenho
⤢useMemo	Guarda em cache um valor calculado até as dependências mudarem.	Evitar recálculos caros entre renders; altere de propósito um valor nas deps para invalidar a cache.
⤢useCallback	Guarda em cache a referência de uma função até as dependências mudarem.	Callbacks estáveis passados a filhos memoizados ou usados como deps.
⤢React.memo	Salta o re-render de um componente cujas props não mudaram.	Componentes filhos pesados; passe uma função de comparação como segundo argumento quando a igualdade rasa não chega (um HOC, não um hook).
Contexto e handles externos
⤢useContext	Lê um valor de contexto sem prop drilling.	Tema, locale ou um utilizador autenticado partilhado pela árvore.
⤢useImperativeHandle	Personaliza a instância que um pai vê através de um ref.	Expor uma API restrita a partir de um filho via forwardRef.
Concorrência e outros
⤢useTransition	Marca uma atualização de estado como não urgente para a UI manter-se responsiva.	Manter a introdução fluida enquanto uma lista pesada re-renderiza.
⤢useDeferredValue	Adia um valor para que as atualizações possam ser interrompidas.	Fazer debounce de renders caros sem timers.
⤢useId	Gera um id único e estável para atributos de acessibilidade.	Ligar label e input entre renders do servidor e do cliente.
⤢use()	Lê uma promise ou contexto durante o render; o único hook que pode ser chamado condicionalmente.	Desembrulhar uma promise com Suspense, ou ler contexto dentro de um return antecipado.
⤢useActionState	Guarda estado dirigido por uma ação de formulário, com uma flag pending incluída.	Submissões de formulário que devolvem erros ou estado atualizado para mostrar inline.
⤢useOptimistic	Renderiza um valor otimista de imediato e reverte para o estado real quando a ação assenta.	Mostrar um like ou uma mensagem enviada enquanto o seu pedido ao servidor está em curso.
⤢useFormStatus	Lê o estado pending do <form> envolvente, sem props.	Um botão de submissão que se desativa enquanto o formulário pai submete.
⤢useSyncExternalStore	Subscreve uma store fora do React e lê um snapshot consistente.	APIs do navegador como o estado online, ou stores de estado de terceiros.
⤢useInsertionEffect	Corre antes dos efeitos de layout, feito para injetar regras CSS-in-JS.	Bibliotecas de estilos que têm de inserir regras antes de o layout ser lido.
⤢useDebugValue	Mostra uma etiqueta personalizada para o estado interno de um hook no React DevTools.	Etiquetar o que um custom hook guarda durante a depuração.
⤢Custom hooks (use*)	O seu próprio hook que compõe os built-ins para partilhar lógica.	Comportamento com estado reutilizável como useFetch ou useMediaQuery.