Hooks são uma nova adição ao React 16.8. Eles permitem que você use o state e outros recursos do React sem escrever uma classe.
\nEssa página descreve as APIs internas dos Hooks no React.
\nSe Hooks é novidade pra você, talvez você queira primeiro ter uma visão geral de como funcionam os Hooks. Você também pode procurar informações úteis na seção de perguntas mais frequentes.
\nuseStateuseEffectuseContextuseState const [state, setState] = useState(initialState);Retorna um valor e uma função para atualizar o valor.
\nDurante a renderização inicial, o estado retornado é o mesmo que o valor passado como argumento inicial (initialState).
A função setState é usada para atualizar o estado. Ela aceita um novo valor de estado e coloca na fila de re-renderização do componente.
setState(newState);Durante as próximas re-renderizações, o primeiro valor retornado por useState sempre será o estado mais recente após a aplicação das atualizações.
\n\nNota
\nReact garante que a identidade da função
\nsetStateé estável e não será alterada nos re-renderizadores. É por isso que é seguro omitir da lista de dependênciasuseEffectouuseCallback.
Se um novo estado for calculado usando o estado anterior, você pode passar uma função para setSate. A função receberá o valor anterior e retornará um valor atualizado. Aqui está um exemplo de um componente de contador que usa as duas formas de usar o setState:
function Counter({initialCount}) {\n const [count, setCount] = useState(initialCount);\n return (\n <>\n Count: {count}\n <button onClick={() => setCount(initialCount)}>Reset</button>\n <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>\n <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>\n </>\n );\n}Os botões ”+” and ”-” usam a forma funcional, porque o valor atualizado é baseado no valor anterior. Mas o botão “Reset” usa a forma normal, porque ele sempre define a contagem de volta para o valor inicial.
\nSe sua função de atualização retornar exatamente o mesmo valor que o estado atual, o renderizador subsequente será ignorado completamente.
\n\n\nNota
\nAo contrário do método
\nsetStateencontrado em componentes de classe,useStatenão combina automaticamente os objetos atualizados. Você pode replicar esse comportamento por combinar a função que atualiza o objeto e o estado anterior usando a sintaxeobject spread\nsetState(prevState => {\n // Object.assign também funcionaria\n return {...prevState, ...updatedValues};\n});Outra opção é o
\nuseReducer, que é mais adequada para gerenciar objetos de estado que contêm vários sub-valores.
O argumento initialState é o estado usado durante a primeira renderização. Nas próximas renderizações, ele é desconsiderado. Se o estado inicial é o resultado desse demorado processamento, você pode fornecer uma função, no qual será executada apenas na primeira renderização:
const [state, setState] = useState(() => {\n const initialState = someExpensiveComputation(props);\n return initialState;\n});Se você atualizar o estado do Hook com o mesmo valor do estado atual, React irá pular a atualização sem renderizar os filhos ou disparar os efeitos. (React usa o algoritmo de comparação Object.is.)
Note que o React pode ainda precisar renderizar esse componente específico novamente antes de sair. Isso não deveria ser uma preocupação porque o React não irá ser “mais profundo” do que o necessário na árvore. Se você está fazendo um processamento mais demorado enquanto renderizada, você pode otimizar isso usando useMemo.
useEffect useEffect(didUpdate);Aceita uma função que contém um código imperativo, possivelmente efetivo.
\nMutações, assinaturas, temporizadores, logs e outros side effects não são permitidos dentro do corpo principal de um componente funcional (React se refere a isso como render phase). Usá-los levará a erros confusos e inconsistências na UI.
Em vez disso, use useEffect. A função passada para useEffect será executada depois que a renderização estiver disponível na tela. Pense em efeitos como um rota de fuga do mundo puramente funcional do React para o mundo imperativo.
Por padrão, os efeitos são executados após cada renderização concluída, mas você pode optar por dispará-los somente quando determinados valores receberam atualização.
\nMuitas vezes, os efeitos criam recursos que precisam ser limpos antes que o componente deixe a tela, como uma assinatura ou o ID de um temporizador. Para fazer isso, a função passada para useEffect pode retornar uma função de limpeza do efeito. Por exemplo, para criar uma assinatura:
useEffect(() => {\n const subscription = props.source.subscribe();\n return () => {\n // Limpa a assinatura antes do componente deixar a tela\n subscription.unsubscribe();\n };\n});A função de limpeza é executada antes que o componente seja removido da UI para evitar vazamento de memória. Entretanto, se um componente renderiza várias vezes (como eles normalmente fazem), o efeito anterior é limpo antes de executar o próximo efeito. No nosso exemplo, isto significa que uma nova assinatura é criada em cada atualização. Para evitar disparar um efeito em cada atualização, consulte a próxima seção.
\nAo contrário de componentDidMount e componentDidUpdate, a função passada para useEffect dispara após a renderização, durante o evento adiado. Isto torna o useEffect adequado para os muitos efeitos colaterais comuns, como a criação de assinaturas e manipuladores de eventos, porque a maioria dos tipos de trabalho não deve bloquear o navegador ao atualizar a tela.
No entanto, nem todos os efeitos podem ser adiados. Por exemplo, uma alteração no DOM visível para o usuário, deve disparar sincronizadamente antes da próxima renderização, para que o usuário não perceba uma inconsistência visual. (A distinção é conceitualmente semelhante a ouvintes de eventos ativos vs passivos.) Para estes tipos de efeitos, React fornece um Hook adicional chamado useLayoutEffect. Tem a mesma estrutura que useEffect, mas é diferente quando disparado.
Embora useEffect seja adiado até a próxima renderização do navegador, é mais garantido disparar antes de qualquer nova renderização. React sempre apagará os efeitos de uma renderização anterior antes de iniciar uma nova atualização.
O comportamento padrão para efeitos é disparar o efeito após cada renderização concluída. Desta maneira, o efeito é sempre recriado se uma de suas dependências for alterada.
\nNo entanto, isto pode ser excessivo em alguns casos, como o exemplo de assinatura da seção anterior. Nós não precisamos criar uma nova assinatura toda vez que atualizar, apenas se a props source for alterada.
Para implementar isso, passe um segundo argumento para useEffect que pode ser um array de valores em que o efeito observa. Nosso exemplo atualizado agora se parece com isso:
useEffect(\n () => {\n const subscription = props.source.subscribe();\n return () => {\n subscription.unsubscribe();\n };\n },\n [props.source],\n);Agora a assinatura só será recriada quando props.source alterar.
\n\nNota
\nSe você usar essa otimização, tenha certeza de que a array inclua qualquer valor do escopo acima (como props e state) que mude com o tempo e que ele seja usado pelo efeito. Caso contrário, seu código fará referência a valores obsoletos de renderizações anteriores. Saiba mais sobre como lidar com funções e o que fazer quando a matriz muda com muita frequência.
\nSe você quer executar um efeito e limpá-lo apenas uma vez (na montagem e desmontagem), você pode passar um array vazio (
\n[]) como segundo argumento. Isso conta ao React que o seu efeito não depende de nenhum valor das props ou state, então ele nunca precisa re-executar. Isso não é tratado como um caso especial — ele segue diretamente a maneira como o array de entrada sempre funcionam.Se você passar um array vazio (
\n[]), a props e o state passados dentro do efeito sempre terão seus valores iniciais. Enquanto passando[]como segundo parâmetro aproxima-se do modelo mental familiar decomponentDidMountecomponentWillUnmount, geralmente hás melhores soluções para evitar efeitos repetidos com muita freqüência. Além disso, não esqueça de que o React adia a execução douseEffectaté o navegador ser pintado, então fazer trabalho extra é menos problemático.Recomendamos usar as regras do
\nexhaustive-depscomo parte do nosso pacoteeslint-plugin-react-hooks. Ele avisa quando as dependências são especificadas incorretamente e sugere uma correção.
O array de dependências não é passada como argumentos para a função de efeito. Conceitualmente, no entanto, é o que eles representam: todos os valores referenciados dentro da função de efeito também devem aparecer no array de dependências. No futuro, um compilador suficientemente avançado poderia criar esse array automaticamente.
\nuseContext const value = useContext(MyContext);Aceita um objeto de contexto (o valor retornado de React.createContext) e retorna o valor atual do contexto. O valor de contexto atual é determinado pela prop value do<MyContext.Provider>mais próximo acima do componente de chamada na árvore.
Quando o <MyContext.Provider> mais próximo acima do componente for atualizado, este Hook acionará um novo renderizador com o value de contexto mais recente passando para o provedor MyContext. Mesmo que um ancestral use React.memo ou shouldComponentUpdate, um renderizador ainda ocorrerá começando no próprio componente usando useContext.
Não esqueça que o argumento para useContext deve ser o objeto de contexto em si:
useContext(MyContext)useContext(MyContext.Consumer)useContext(MyContext.Provider)Um componente que chama useContext será sempre renderizado novamente quando o valor do contexto for alterado. Se voltar a renderizar o componente é caro, você pode otimizá-lo usando o memoization.
\n\nDica
\nSe você estiver familiarizado com a API de contexto antes de Hooks,
\nuseContext (MyContext)é equivalente astatic contextType = MyContextem uma classe, ou a<MyContext.Consumer>.\n
useContext(MyContext)só permite que você leia o contexto e assine suas alterações. Você ainda precisa de um<MyContext.Provider>acima na árvore para fornecer o valor para este contexto.
Juntar as peças com Context.Provider
\nconst themes = {\n light: {\n foreground: \"#000000\",\n background: \"#eeeeee\"\n },\n dark: {\n foreground: \"#ffffff\",\n background: \"#222222\"\n }\n};\n\nconst ThemeContext = React.createContext(themes.light);\n\nfunction App() {\n return (\n <ThemeContext.Provider value={themes.dark}>\n <Toolbar />\n </ThemeContext.Provider>\n );\n}\n\nfunction Toolbar(props) {\n return (\n <div>\n <ThemedButton />\n </div>\n );\n}\n\nfunction ThemedButton() {\n const theme = useContext(ThemeContext); return ( <button style={{ background: theme.background, color: theme.foreground }}> I am styled by theme context! </button> );\n}Este exemplo é modificado para hooks a partir de um exemplo anterior no Guia Avançado de Context, onde você pode encontrar mais informações sobre quando e como usar o Context.
\nOs próximos Hooks são variações dos princípios básicos da seção anterior ou apenas necessários para um caso de uso específico. Não se estresse sobre aprendê-las antes dos princípios básicos.
\nuseReducer const [state, dispatch] = useReducer(reducer, initialArg, init);Uma alternativa para useState. Aceita um reducer do tipo (state, action) => newState e retorna o estado atual, junto com um método dispatch. (Se você está familiarizado com o Redux, você já sabe como isso funciona.)
useReducer é geralmente preferível em relação ao useState quando se tem uma lógica de estado complexa que envolve múltiplos sub-valores, ou quando o próximo estado depende do estado anterior. useReducer também possibilita a otimização da performance de componentes que disparam atualizações profundas porque é possível passar o dispatch para baixo, ao invés de callbacks.
Aqui está o exemplo do contador na seção useState, reescrito para usar um reducer:
const initialState = {count: 0};\n\nfunction reducer(state, action) {\n switch (action.type) {\n case 'increment':\n return {count: state.count + 1};\n case 'decrement':\n return {count: state.count - 1};\n default:\n throw new Error();\n }\n}\n\nfunction Counter() {\n const [state, dispatch] = useReducer(reducer, initialState);\n return (\n <>\n Count: {state.count}\n <button onClick={() => dispatch({type: 'decrement'})}>-</button>\n <button onClick={() => dispatch({type: 'increment'})}>+</button>\n </>\n );\n}\n\nNota
\nReact garante que a identidade da função
\ndispatché estável e não será alterada nos re-renderizadores. É por isso que é seguro omitir da lista de dependênciasuseEffectouuseCallback.
Há duas maneiras diferentes de inicializar o estado useReducer. Pode você escolher qualquer uma dependendo do seu caso de uso. A maneira mais simples é passar o estado inicial como um segundo argumento:
const [state, dispatch] = useReducer(\n reducer,\n {count: initialCount} );\n\nNota
\nReact não usa a convenção
\nstate = initialStatepopularizada pelo Redux. O valor inicial precisa às vezes, depender de props e, portanto é especificado a partir da chamada do Hook. Se você se sentir bem sobre isso, você pode chamaruseReducer(reducer, undefined, reducer)para simular o comportamento do Redux, mas não encorajamos isso.
Você pode também criar um estado inicial mais lento. Para fazer isso, você pode passar uma função init como terceiro argumento. O estado inicial será setado para init(initialArg).
Isso nos permite extrair a lógica que calcula o estado inicial para fora do reducer. Isso é útil também para resetar um estado depois da resposta de uma ação:
function init(initialCount) { return {count: initialCount};}\nfunction reducer(state, action) {\n switch (action.type) {\n case 'increment':\n return {count: state.count + 1};\n case 'decrement':\n return {count: state.count - 1};\n case 'reset': return init(action.payload); default:\n throw new Error();\n }\n}\n\nfunction Counter({initialCount}) {\n const [state, dispatch] = useReducer(reducer, initialCount, init); return (\n <>\n Count: {state.count}\n <button\n onClick={() => dispatch({type: 'reset', payload: initialCount})}>\n Reset\n </button>\n <button onClick={() => dispatch({type: 'decrement'})}>-</button>\n <button onClick={() => dispatch({type: 'increment'})}>+</button>\n </>\n );\n}Se você retornar o mesmo valor do Hook Reducer que o valor do state atual, React irá pular a ação sem renderizar os filhos ou disparar os efeitos. (React usa o algoritmo de comparação Object.is.)
Note que o React ainda pode precisar renderizar aquele componente específico novamente antes de pular para fora da ação. Isso não deve ser um problema porque o React não vai se aprofundar desnecessariamente na árvore. Se você está fazendo cálculos de alto custo enquanto renderiza, você pode optimizá-los usando o useMemo.
useCallback const memoizedCallback = useCallback(\n () => {\n doSomething(a, b);\n },\n [a, b],\n);Retorna um callback memoizado.
\nRecebe como argumentos, um callback e um array. useCallback retornará uma versão memoizada do callback que só muda se uma das entradas tiverem sido alteradas. Isto é útil quando utilizamos callbacks a fim de otimizar componentes filhos, que dependem da igualdade de referência para evitar renderizações desnecessárias (como por exemplo shouldComponentUpdate).
useCallback(fn, inputs) é equivalente a useMemo(() => fn, inputs)
\n\nNota
\nO array não é usado como argumento para o callback. Conceitualmente, porém, é isso que eles representam: todos os valores referenciados dentro da função também devem aparecer no array passado como argumento. No futuro, um compilador suficientemente avançado poderia criar este array automaticamente.
\nRecomendamos usar as regras do
\nexhaustive-depscomo parte do nosso pacoteeslint-plugin-react-hooks. Ele avisa quando as dependências são especificadas incorretamente e sugere uma correção.
useMemo const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);Retorna um valor memoizado.
\nRecebe uma função create e um array como argumentos. O useMemo só recuperará o valor memoizado quando o array receber uma atualização. Esta otimização ajuda a evitar cálculos caros em cada renderização.
Lembre-se de que a função passada para useMemo será executa durante a renderização. Não faça nada lá que você normalmente não faria ao renderizar. Por exemplo, os side effects pertencem a useEffect, não à useMemo.
Se nenhum array for fornecida, um novo valor será calculado em cada renderização.
\nVocê pode confiar em useMemo como uma otimização de desempenho, não como uma garantia semântica. No futuro, o React pode escolher “esquecer” alguns valores anteriormente agrupados e recalculá-los na próxima renderização, por exemplo, para liberar memória para outros componentes. Escreva seu código para que ele ainda funcione sem useMemo — e depois adicione-o para otimizar o desempenho.
\n\nNote
\nO array de entradas não é passada como argumentos para a função. Conceitualmente, porém, é isso que eles representam: todos os valores referenciados dentro da função também devem aparecer no array passado como argumento. No futuro, um compilador suficientemente avançado poderia criar este array automaticamente.
\nRecomendamos usar as regras do
\nexhaustive-depscomo parte do nosso pacoteeslint-plugin-react-hooks. Ele avisa quando as dependências são especificadas incorretamente e sugere uma correção.
useRef const refContainer = useRef(initialValue);useRef retorna um objeto ref mutável, no qual a propriedade .current é inicializada para o argumento passado (initialValue). O objeto retornado persistirá durante todo o ciclo de vida do componente.
Um caso comum de uso é o acesso imperativamente a um componente filho:
\nfunction TextInputWithFocusButton() {\n const inputEl = useRef(null);\n const onButtonClick = () => {\n // `current` aponta para o evento de `focus` gerado pelo campo de texto\n inputEl.current.focus();\n };\n return (\n <>\n <input ref={inputEl} type=\"text\" />\n <button onClick={onButtonClick}>Focus no input</button>\n </>\n );\n}Essencialmente, useRef é como uma “caixa” que pode conter um valor mutável em sua propriedade .current.
Você pode estar familiarizado com os refs principalmente como uma forma de acessar o DOM. Se você passar um objeto ref para React com <div ref = {myRef} />, React definirá sua propriedade .current para o nó DOM correspondente sempre que esse nó for alterado.
No entanto, useRef () é útil para mais do que o atributo ref. É útil para manter qualquer valor mutável em torno, semelhante a como você usaria campos de instância em classes.
Isso funciona porque useRef () cria um objeto JavaScript simples. A única diferença entre useRef () e a criação de um objeto {current: ...} é que useRef lhe dará o mesmo objeto ref em cada render.
Tenha em mente que o useRef não avisa quando o conteúdo é alterado. Mover a propriedade .current não causa uma nova renderização. Se você quiser executar algum código quando o React anexar ou desanexar um ref a um nó DOM, convém usar um callback ref.
useImperativeHandle useImperativeHandle(ref, createHandle, [deps])useImperativeHandle personaliza o valor da instância que está exposta aos componentes pai ao usar ref. Como sempre, na maioria dos casos, seria bom evitar um código imperativo usando refs. O useImperativeHandle deve ser usado com forwardRef:
function FancyInput(props, ref) {\n const inputRef = useRef();\n useImperativeHandle(ref, () => ({\n focus: () => {\n inputRef.current.focus();\n }\n }));\n return <input ref={inputRef} ... />;\n}\nFancyInput = forwardRef(FancyInput);Neste exemplo, um componente pai que renderiza <FancyInput ref={inputRef} /> seria capaz de chamar inputRef.current.focus().
useLayoutEffect A assinatura é idêntica a useEffect, mas dispara sincronizadamente após todas as alterações no DOM. Use isto para ler o layout do DOM e renderizar sincronizadamente. Atualizações agendadas dentro de useLayoutEffect serão liberadas de forma síncrona, antes que o navegador tenha a chance de atualizar.
Prefira o padrão useEffect quando possível, para evitar bloquear atualizações visuais.
\n\nDica
\nSe você está migrando código de um componente de classe,
\nuseLayoutEffectdispara na mesma fase quecomponentDidMountecomponentDidUpdate, No entanto, recomendamos iniciar comuseEffectprimeiro e apenas tentaruseLayoutEffectse isso causar algum problema.Se você usar a renderização do servidor, tenha em mente que nem
\nuseLayoutEffectnemuseEffectpodem ser executados até que o JavaScript seja baixado. É por isso que React avisa quando um componente renderizado pelo servidor contémuseLayoutEffect. Para corrigir isso, mova essa lógica parauseEffect(se não for necessário para a primeira renderização) ou retarde a exibição desse componente até depois que o cliente renderizar (se o HTML parecer quebrado até queuseLayoutEffectseja executado).Para excluir um componente que precisa de efeitos de layout do HTML renderizado pelo servidor, renderize-o condicionalmente com
\nshowChild && <Child />e adie a exibição dele comuseEffect (() => { setShowChild(true); }, []). Dessa forma, a UI não parece quebrada antes da hidratação.
useDebugValue useDebugValue(value)useDebugValue pode ser usado para exibir um label em um custom hook em React DevTools.
Por exemplo, considere o custom hook useFriendStatus descrito em “Criando seus próprios Hooks”:
function useFriendStatus(friendID) {\n const [isOnline, setIsOnline] = useState(null);\n\n // ...\n\n // Mostra um `label` no DevTools ao lado desse hook // ex. \"FriendStatus: Online\" useDebugValue(isOnline ? 'Online' : 'Offline');\n return isOnline;\n}\n\nDica
\nNão recomendamos adicionar valores de depuração a cada custom hook criado. É mais valioso para
\ncustom hooksque são partes de bibliotecas compartilhas.
Em alguns casos, exibir um valor formatado pode ser uma operação cara. Também é desnecessário a menos que um hook seja realmente inspecionado.
\nPor esta razão, useDebugValue aceita uma função de formatação como um segundo parâmetro opcional. Esta função só é chamada se os hooks forem inspecionados. Ele recebe o valor de depuração como parâmetro e deve retornar um valor de exibição formatado.
Por exemplo, um custom hook que retornou um valor Date poderia evitar chamar a função toDateString desnecessariamente passando o seguinte formatador:
useDebugValue(date, date => date.toDateString());