Com o React 16.8, React Hooks tornam-se disponíveis em sua versão estável!
\nHooks lhe permite utilizar estado e outras funcionalidades do React sem a necessidade de escrever uma classe. Assim como, você também pode criar o seus próprios Hooks para compartilhar e reutilizar sua lógica com estado entre componentes.
\nSe você nunca ouviu falar sobre Hooks antes, talvez você ache estes tópicos interessantes:
\nVocê não precisa aprender Hooks agora. Hooks não quebra aplicações existentes, e nós não temos planos de remover o uso de classes do React. O Hooks FAQ descreve à adoção gradual da estratégia.
\nNão recomendamos que você reescreva suas aplicações existentes, apenas para utilizar Hooks de uma hora para outra. Pelo contrário, tente utilizar Hooks em alguns de seus novos componentes, e deixe-nos saber o que você acha. Desenvolver utlizando Hooks, funcionará lado a lado ao código já existente qual faz uso de classes.
\nSim! Iniciando com a versão 16.8.0, o React inclui a versão estável da implementação do React Hooks para:
\nObserve que para utilizar Hooks, todos os pacotes do React precisam estar na versão 16.8.0 ou superior. Hooks não irão funcionar se você esquecer de atualizar, por exemplo, o React DOM.
\nO React Native terá suporte ao Hooks na versão 0.59.
\nReact Hooks agora são suportados pelo React DevTools. Assim como, as últimas definições de Flow e TypeScript do React. Nós recomendamos fortemente a utilização da nova regra lint, chamada: eslint-plugin-react-hooks, para a aplicação das melhores práticas de codificação com Hooks. Em breve, ela será incluída ao Create React App por padrão.
Nós descrevemos nossos planos para os próximos meses na recente publicação do Roteiro React.
\nObserve que React Hooks ainda não cobrem todos os casos de uso de classes, mas eles estão bem próximos. Atualmente, apenas os métodos que não possuem API de Hooks equivalentes são getSnapshotBeforeUpdate() e componentDidCatch(), estes ciclos de vida são relativamentes incomuns. Se você quiser, você deve conseguir utilizar Hooks em grande parte do novo código qual você está escrevendo.
Mesmo enquanto Hooks estavam em sua versão alpha, a comunidade React criou muitos exemplos e indicações interessantes usando Hooks, seja para animações, formulários, subscriptions, integração com outras bibliotecas e assim por diante. Nós estamos entusiasmados com Hooks, porque eles tornam a reutilização de código mais fácil, ajudando você a escrever seus componentes de forma simples e criando grandes experiências de usuário. Não podemos esperar para ver o que você irá criar em seguida!
\nNós adicionamos uma nova API nesta versão, chamada ReactTestUtils.act(). Ela garante que o comportamento de seus testes, correspondam de forma mais semelhante com o que acontece no navegador. Nós recomendamos encapsular quaquer código de renderização e execução de atualizações ao seu componente, dentro das chamadas aos métodos act(). Bibliotecas de teste, do mesmo modo, podem encapsular suas APIs com o método (por exemplo: utilitários do react-testing-library, como render e fireEvent, fazem isto).
Por exemplo, o exemplo de contador desta página pode ser testado assim:
\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { act } from 'react-dom/test-utils';import Counter from './Counter';\n\nlet container;\n\nbeforeEach(() => {\n container = document.createElement('div');\n document.body.appendChild(container);\n});\n\nafterEach(() => {\n document.body.removeChild(container);\n container = null;\n});\n\nit('can render and update a counter', () => {\n // Testa primeira renderização e resultado\n act(() => { ReactDOM.render(<Counter />, container); }); const button = container.querySelector('button');\n const label = container.querySelector('p');\n expect(label.textContent).toBe('Você clicou 0 vezes');\n expect(document.title).toBe('Você clicou 0 vezes');\n\n // Testa segunda renderização e resultado\n act(() => { button.dispatchEvent(new MouseEvent('click', {bubbles: true})); }); expect(label.textContent).toBe('Você clicou 1 vezes');\n expect(document.title).toBe('Você clicou 1 vezes');\n});As chamadas ao método act() também irão disparar os efeitos dentro delas.
Se você precisa testar um Hook customizado, você pode fazer isso criando um componente em seu teste e utilizar seu Hook a partir dele. Assim, você pode testar o componente qual você escreveu.
\nPara reduzir a repetição, nós recomendamos utilizar a react-testing-library, qual é projetada para incentivar a escrita de testes, que utilizam de seus componentes como o usuário final utiliza.
Nós gostaríamos de agradecer todos aqueles que comentaram no Hooks RFC, por terem compartilhado suas opiniões. Nós lemos todos os seus comentários e fizemos alguns ajustes finais nas APIs baseando-se neles.
\nO React v16.8.0 está disponível no registro do npm.
\nPara instalar o React 16 com o Yarn, execute:
\nyarn add react@^16.8.0 react-dom@^16.8.0Para instalar o React 16 com o npm, execute:
\nnpm install --save react@^16.8.0 react-dom@^16.8.0Nós também fornecemos compilações UMD do React via CDN:
\n<script crossorigin src=\"https://unpkg.com/react@16/umd/react.production.min.js\"></script>\n<script crossorigin src=\"https://unpkg.com/react-dom@16/umd/react-dom.production.min.js\"></script>Consulte a documentação para instruções de instalações detalhadas.
\n\n\nObservação
\nComo mencionado acima, nós recomendamos severamente o uso da regra do
\neslint-plugin-react-hooks.Se você está usando o Create React App, ao invéz da configuração manual do ESLint, você pode aguardar pela próxima versão do
\nreact-scrips, qual será lançada em breve e irá incluir esta regra.
Assumindo que você já possui o ESLint instalado, excute:
\n# npm\nnpm install eslint-plugin-react-hooks --save-dev\n\n# yarn\nyarn add eslint-plugin-react-hooks --devEntão adicione em suas confugações do ESLint:
\n{\n \"plugins\": [\n // ...\n \"react-hooks\"\n ],\n \"rules\": {\n // ...\n \"react-hooks/rules-of-hooks\": \"error\"\n }\n}useReducer. (@acdlite em #14723)useState e useReducer. (@acdlite em #14569)useEffect/useMemo/useCallback. (@acdlite em #14594)Object.is para comparação dos valores de useState e useReducer. (@Jessidhia em #14752)React.lazy(). (@gaearon em #14626)undefined ou uma função. Todos os outros valores, incluindo null, não são permitidos. @acdlite em #14119shouldComponentUpdate junto ao getDerivedStateFromProps ao renderizador superficial (Shallow Renderer). (@chenesan em #14613)ReactTestRenderer.act() e ReactTestUtils.act() para atualizações em lote a fim de que testes sejam executados de forma mais semelhante ao comportamento real. (@threepointone em #14744)O histórico de mudanças acima contém todas as mudanças notáveis, desde a nossa última versão estável (16.7.0). Assim como, todos o nossos lançamentos secundários, não interrompe a compatibilidade com as versões anteriores.
\nSe você está utilizando Hooks da versão alpha do React, observe que esta versão contêm algumas pequenas mudanças, que causa instabilidade ao Hooks. Nós não recomendamos a dependência da versão alpha em código de produção. Nós publicamos versões alpha para realizar mudanças com base na opinião da comunidade, antes da versão estável da API.
\nAqui estão todas as mudanças radicais do Hooks, quais foram feitas desde a primeira versão alpha:
\nuseMutationEffect. (@sophiebits em #14336)useImperativeMethods para useImperativeHandle. (@threepointone em #14565)useState e useReducer. (@acdlite em #14569)useEffect/useMemo/useCallback. (@acdlite em #14594)Object.is para comparação dos valores de useState e useReducer. (@Jessidhia em #14752)useReducer. (@acdlite em #14723)