João Paulo Siqueira Lins, um desenvolvedor full-stack na Vinta, discute o uso de React Hooks, suas funcionalidades e benefícios na simplificação do gerenciamento de estado e ciclo de vida dos componentes em aplicações React. O documento explora diversos hooks, como useState, useEffect e useContext, além de destacar a importância das regras de uso e a criação de custom hooks. A adoção dos hooks é abordada, enfatizando a necessidade de preparação e estudo para sua implementação eficaz em projetos.

1. React Recife
React Hooks
João Paulo Siqueira Lins Full-stack developer

2. A Vinta é um pequeno time de experts.
Fazemos estratégia, design e
desenvolvimento para produtos web.
Tocamos projetos de médio prazo (1 a 3 anos)
para startups que já começaram a decolar.

3. ● Graduado em Eng. Comp. @ UFPE
● 4 anos de experiência em webdev
● Curte rolês de moto
Full-stack developer

4. React Hooks

5. React Hooks
● Pré React 16.8
● Estado / Lifecycle
● Problemas com colocation
● Problemas com Reuso

6. React Hooks
React 16.8 nos traz Hooks,
que nos permite resolver
estes problemas de forma
elegante e eficiente.

7. React Hooks
React Today and Tomorrow and 90% Cleaner React With Hooks

8. React Hooks

9. React Hooks

10. API

11. React Hooks
O React nos fornece Hooks para lidarmos com
estado, lifecycle dos componentes, contexto,
referências, e outros.
● useState
● useEffect
● useContext

12. React Hooks - useState
● useState persiste dados e,
quando modificado, atualiza o
componente (rerender).
● Recebe como parâmetro
valor inicial ou função
construtora.

13. React Hooks - useState
● Idealmente, ter vários
useStates, cada um com sua
responsabilidade.
● Não é necessário ter um
objeto, pode-se usar strings,
booleanos, arrays, etc.

14. React Hooks - useEffect
● Com o useEffect, podemos
ter um código que roda de
acordo com o lifecycle do
componente, ou mudança de
dependências.
● Ele também fornece meios
de “limpar” esse efeito.

15. React Hooks - useEffect
● Aceita um segundo
parâmetro, que é o array de
dependências.

16. React Hooks - useEffect
● O array de dependências pode conter props, estado, dados do
contexto, etc.
● Útil para realizar ações que dependem de valores específicos.

17. React Hooks - useEffect
● Não é só um jeito bonito de fazer componentDidMount, etc. De fato é
uma nova forma de pensar.

18. React Hooks - useEffect

19. React Hooks - useEffect
● Assim como o useState, é recomendado usar vários useEffects, para
separar o código semanticamente.
● Dica: Regra do eslint "react-hooks/exhaustive-deps". Recomendada
oficialmente, mas não tão fácil de seguir.

20. React Hooks - useContext
● useContext é uma maneira mais prática de consumir contextos.

21. React Hooks - Hooks Adicionais
Estes Hooks são ou variantes dos anteriores, ou
para casos bem específicos
● useReducer
● useCallback / useMemo
● useRef
● Outros

22. React Hooks - useReducer
● Se vários estados estão
semanticamente próximos,
em vez de usar vários
useStates, é mais adequado
usar useReducer.
● Funciona de forma parecida
com o reducer do Redux.

23. React Hooks - useCallback
● Em componentes de classe, é possível guardar a referência de
callbacks.
● Em componentes funcionais, isso se torna possível com useCallback.
● Útil para manter a referência, como em componentes puros, por
exemplo.

24. React Hooks - useCallback
● Também conta com um
array de dependências,
parecido com o useEffect.
● Nesse caso, ele é usado
para recriar a função para
evitar valores obsoletos.

25. React Hooks - useMemo
● useMemo é usado para
otimizações de
computações custosas, ou
de componentes cuja
renderização é muito
custosa.

26. React Hooks - useMemo
● Não use useMemo para efeitos colaterais, para isso use o useEffect.

27. React Hooks - useCallback/useMemo
● useCallback e useMemo parecem ser bastante necessários mas nem
sempre precisam ser usados. Um artigo do Kent C. Dodds explica isso
com mais detalhes.

29. React Hooks - useRef
● Usado para guardar valores
voláteis, como o useState,
porém não notifica o
componente para
renderização.
● Exemplo simples para DOM
mas é muito mais versátil que
isto.

30. React Hooks - Mais Hooks
Existem mais Hooks do React, porém eles tem
um caso de uso mais específico.
● useImperativeHandle
● useLayoutEffect
● useDebugValue
React Suspense:
● useTransition
● useDeferredValue

31. Rules of Hooks &
Custom Hooks

32. React Hooks - Rules of Hooks
Rules of Hooks são um conjunto de regras que
você deve seguir ao usar Hooks.
● Não execute Hooks dentro de condicionais, loops e funções.
● Só execute Hooks em componentes funcionais, ou em Custom
Hooks.
● Padrão: Hooks começam com use

33. React Hooks - Rules of Hooks

34. React Hooks - 3rd party Hooks
Você provavelmente pode atualizar as dependências
do seu projeto para ter vantagem com Hooks.
● React Redux - useSelector e useDispatch
● React Router - useParams, useHistory, useLocation
● Formik - useField, useFormik
● Novos - React-Query, SWR, etc.

35. ● Compartilhamento e abstração de lógica entre componentes,
algo que não era possível com classes.
● State, Lifecycle, Context, Refs, etc
React Hooks - Custom Hooks
A melhor parte, e o que faz Hooks ser uma
funcionalidade fantástica, são os Custom Hooks.

36. ● useCurrentUser(), usePermissions(), useToggles()
● Custom hook com useLocation() - Rota Origem
React Hooks - Custom Hooks
Exemplos:

37. ● useSelector + useDispatch
React Hooks - Custom Hooks

38. React Hooks - Custom Hooks
● Abstrair lógica, mesmo se ela for relativamente simples, pode trazer
bastante valor. Inclusive para refatorações futuras.

40. Como adotar?

41. React Hooks - Adoção
● Depois de começar a ver Hooks, você deve estar pensando: “Que legal!
Vou começar a usar isso amanhã no meu projeto!”.
● Talvez você tenha algum colega tão animado quanto você, ou o seu
líder técnico já estava de olho em Hooks. Isso torna as coisas mais
fáceis.
● Porém, apesar de parecer simples, usar Hooks não é tão trivial assim,
mesmo para devs experientes. Na Vinta, tivemos bastante cuidado
nesse processo.

42. React Hooks - Adoção
● Atualizar versão do React - React 16.8.
● Estude a fundo sobre hooks.
● Introduza a ideia para o seu time.
○ Tenha a permissão do seu gerente / lider técnico.
○ Apresentação rápida - Documentação do React.
○ Tem como objetivo dar uma noção para o time.

43. React Hooks - Adoção
● Atualize bibliotecas do projeto - Utilizar Hooks de terceiros ajuda na
adoção.
● Ache um bom caso de uso no projeto para um Custom Hook.
● useOriginLocation
● useEllipsisCheck

44. React Hooks - Adoção
● Ensine o seu time
○ Pair Programming
○ Code Review
○ Oportunidades para Custom Hooks

46. Extra
● Redux VS Hooks + Context API?
● Exemplo de “Meu Redux” => useReducer + useContext
● Vantagens do Redux
○ Middlewares
○ Time Travel (Redux DevTools)
● Desvantagens do Redux
○ Curva de aprendizado
○ Muito Boilerplate

47. Paliativos
● Overmind
● Rematch
● Easy-peasy
● Etc...

48. Redux Toolkit
● Do mesmo time do React Redux
● Opinionated!!!
● Configuração fácil
● Integrado com:
○ Redux DevTools
○ Immer
○ Typescript

49. Redux pra tudo?
● O foco do Redux é estado global.
● CRUD? Não precisa de Redux
● Use seu próprio framework
usando Hooks OU
● Soluções como
SWR e React Query
dão robustez e simplicidade.
● Cache, retry, prefetch, etc...

50. Obrigado!