Ministrado por Leandro Budau de Moraes no PagSeguro

1. REACT HOOKS

2. Definição
●
Hooks (Gancho) é uma função especial que
permite ligar-se aos recursos React
●
A partir da versão 16.8

3. Diferença

4. Motivação
●
Evita componentes enormes que são dificeis de refatorar e
testar
●
Evita lógica duplicada entre diferentes componentes e método
de ciclo de vida
●
Evitar uso de padrões complexos:
– Render Props
– Callback hell
– HOC – High Order Component
Não há planos para remover class do react

5. RenderProps

6. Callback Hell

7. HOC
●
Evitar repetir logicas em mais componentes
●
https://api.github.com/users/{user}/repos

8. Vantagens
●
Não será mais necessário a utilização de classes
●
Evitará a utilização de this e bind(), conceitos que geram muita
confusão principalmente para iniciantes
●
Poderemos dividir e separar componentes funcionais e torná-los
reutilizáveis
●
Os testes serão muito mais fáceis, justamente por causa da
separação de componentes
●
Menos linha de código

9. Regras de uso
●
Não chame Ganchos dentro de loops,
condições ou funções aninhadas
●
Não chame ganchos de funções regulares do
JavaScript (apenas funções React ou Hooks
personalizados)

10. Regras de uso (cont)
●
Para garantir que as regras não sejam quebradas,
podemos usar um plugin criado pelo facebook com esta
finalidade. Abaixo segue nome e configuração
INSTALAÇÃO
https://www.npmjs.com/package/eslint-plugin-react-hooks
CONFIGURAÇÃO
Via npm
Via yarn
ESLINT-PLUGIN-REACT-HOOKS

11. Lista de hooks
●
Basicos
– useState
– useEffect
– useContext
●
Adicionais
– useReducer
– useCallback
– useMemo
– useRef
– useImperativeHandle
– useLayoutEffect
– useDebugValue
Podemos criar hooks personalizados

12. UseState
●
Cria estados para seus components sem uso
de classe
Assinatura
Variável que representa o estado
Função para alterar a variável
Parâmetro que inicializa a variavel
de estado (opcional)

13. UseState
●
Criar um contador
●
Criar um botão
●
Fazer um componente com recursos de hooks
state

14. UseEffect
●
UseEffect permite realizar efeitos colaterais
(side effects) em componentes de função:
– Obtenção de dados data-fetching;
– Mudanças manuais no DOM
– Inclusão de um novo item em uma lista já
renderizada

15. UseEffect (cont)
●
O useEffect permite fazer as mesmas
operações realizadas pelos lifecycle de class
Assinatura

16. UseEffect (cont)
Demonstrar na prática o uso do hooks
useEffect para cada lifecycle existente nos
componentes de classe do react.
●
ComponentDidUpdate
●
ComponentDidMount
●
ComponentWillReceiveProps
●
ComponentWillUnMount

17. USEFFECT
Podemos entregar uma função de retorno ao useEffect
para que ele executar quando terminar seu tempo de vida.

18. UseContext
https://medium.com/simply/state-management-with-react-hooks-and-context-api-at-10-lines-of-code-baf6be8302c
Gerenciamento de estado
Permite compartilhar dados para filhos
diretamente sem a necessidade de criar props
Assinatura

19. UseContext (cont)
https://medium.com/simply/state-management-with-react-hooks-and-context-api-at-10-lines-of-code-baf6be8302c
Gerenciamento de estado

20. UseReducer
Alternativa para useState. Aceita um redutor (state, action) => newState e retorna o
estado atual emparelhado com um metodo dispatch.
●
Usando quando você tem lógica de estado complexo.
Assinatura

21. Memoization

22. UseCallback
●
Impede a renderização desnecessária, tornando o codigo mais eficiente.
●
Armazena em cache a instância da função fornecida.
Assinatura

23. UseCallback (cont)
Vamos para pratica.
Faremos a manipulação do contador para analisar se a
função é criada novamente ou não

24. UseMemo
●
Armazena o resultado em cache e não a função
●
Útil quando o resultado requer recurso
significativos da máquina. Cada renderização
este calculo se repete
Assinatura

25. UseMemo
Vamos para prática
Faremos a manipulação de uma conta que demonstra uma simples complexidade
a fim de analisar a vantagem de memoização.
Quando a conta solicitada já está em cache a função não é realizada novamente.
Isto evita processamento desnecessário da máquina

26. UseRef
●
UseRef retorna um objeto ref mutável cuja
propriedade .current é inicializada para o
argumento passado ( initialValue). O objeto
retornado persistirá durante todo o tempo de vida
do componente.
Assinatura

27. UseRef (cont)
Vamos para prática
Faremos um exercicio cuja
ideia é pegar o valor de uma
caixa de texto no momento
do evento click de um botão
é imprimir na tela.

28. forwardRef
●
Transfere o ref para algum filho de um
componente
Assinatura

29. useImperativeHandle
●
useImperativeHandle personaliza o valor da
instância que está exposta aos componentes
pai ao usar ref
●
Usado com o ForwardRef
useImperativeHandle

30. UseImperativeHandle
Vamos para prática
●
Criar um componente que tenha um forwardRef
para um componente interno referenciando um
text. Neste componente deve-se usar o hooks
useImperativeHandle para alterar as
propriedade da chave .current do refs.

31. UseLayoutEffect
●
Mesma assinatura do useEffect, porém é
síncrono.
●
Usado para ler layout do DOM e renderizar
novamente de forma síncrona.
●
As alterações acontecem antes do navegador
“pintar” na tela
Prefira o hooks useEffect quando possível. Isto evita
bloqueios de atualizações visuais

32. UseLayoutEffect
●
Vamos para pratica
Alterar a propriedade de um elemento do DOM para ver o efeito que causa
usando o Hooks UseEffect e o Hooks UseLayoutEffect

33. UseDebugValue
●
Usado para exibir um rótulo para ganchos
personalizados no React to DevTools
Assinatura
●
O parâmetro format só é chamado se o gancho for inspecionado no
ReactDevTools e é opcional.
●
Usado para não deixar esta operação cara no lado do hooks personalizado

34. Testes Unitários no JEST
●
Por simplicidade tanto do que será testado quanto de
configuração da lib, a comunidade está apontando seus
olhos ultimamente para a lib REACT-TESTING-LIBRARY
Não farei um paralelo, mas optarei por mostrar esta já
que também sei que o enzyme já pe de domínio de
vocês.

35. Testes Unitários no JEST
●
Para testar o render do componente
●
Não precisa de usar lib de apoio