Hooks é um conjunto com novas funcionalidades que permitem ao usuário controlar o state de uma forma mais simples, mais rápida e mais intuitiva. Sua implementação foi a partir da versão 16.7.0-alpha e a promessa que o usuário consiga transitar gradativamente do padrão usado atualmente para o Hooks sem Breaking Changes e sem muita dificuldade, podendo no início utilizar até as duas formas.
Lista de Hooks.
Os Hooks são classificados em básicos e adicionais da seguinte forma:
Hooks básicos:
- useState
- useEffect
- useContext
Hooks adicionais:
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeMethods
- useMutationEffect
- useLayoutEffect
Quer aprender React.js na prática? Clique aqui para saber como.
Hooks Basicos:
O useState permite ler e armazenar as informações de forma mais fácil e prática no state, podendo eliminar alguns componentes de classes e substituindo por componentes funcionais.
UseEffect é um hook que é utilizado para executar funções que necessitam ou realizam algum efeito no componente como, por exemplo, mutations, subscriptions, timers e logging. Possuem a mesma funcionalidade que os componentDidMount e componentDidUpade tem nas classes.
O useContext é um hook que permite ao usuário usar o Context passando o state entre os componentes Povider que vem do state e Consumer que receberá de forma mais fácil e rápida.
Hooks Adicionais:
O useReducer geralmente e usado 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.
UseCallback retorna uma versão memoizada do callback que só modifica se uma das entradas tiverem sido alteradas.
UseMemo recupera o valor do memoizado só quando o array recebe uma atualização, tendo uma otimização que ajuda a evitar cálculos caros em cada renderização.
UseRef retorna um objeto ref mutável, no qual a propreidade .current é inicializada para o argumento passado (initialValue).O objeto retorna a persistir durante todo o ciclo de vida do componente.
UseImperativeHandle personaliza o valor da instância que está exposta aos componentes pai ao usar ref.
O useLayoutEffect tem 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.
UseDebugValue pode ser usado para exibir um label em um custom hook em React DevTools
Configurando o projeto.
Criei usando o create-react-app.
- create-react-app todo-hooks
Feito isso temos que alterar a versão do react e do react-dom, pois na data que criei este exemplo em novembro de 2018 a versão do react instalada ainda não possuía os hooks.
Após instalado vamos entrar na pasta do projeto.
- cd todo-hooks
E alterar as versões.
- npm install react@16.7.0-alpha.0 –save
- npm install react-dom@16.7.0-alpha.0 –save
Quer aprender React.js na prática? Clique aqui para saber como.
Fica a sua livre escolha deletar ou não os arquivos que não vamos usar, como também fica criar uma pasta de componentes para guardar todos os nossos componentes dentro.
Para mais informações entre no site.
