React Hooks - Componentes funcionais (mais) inteligentes

Transcript

1. 1.

   React Hooks Componentes funcionais (mais) inteligentes

2. 2.

   Matheus Calegaro Dev @ B2W / Ame Digital https://matheus.me

3. 3.

   2 formas de criar componentes Class component Functional component

4. 4.

   Class Components são mais poderosos... • State • Lifecycle Methods

   • Lógica específica • HOCs
5. 5.

   ...mas possuem alguns probleminhas Complexidade Mais trabalho para o Babel

   Mais trabalho para iniciantes Reutilização difícil
6. 6.

   None
7. 7.

   “Por que não fazer com que Functional Components possam ter

   acesso ao state e outras coisas legais de Class Components?” — Alguém do time do React, provavelmente
8. 8.

   Hooks! * disponível a partir da versão 16.8 do React

9. 9.

   Agora podemos ter acesso ao state, lifecycle methods, etc de

   uma forma mais elegante! ProTip™: todo Hook possui o prefixo “use”
10. 10.

    useState useState recebe o valor inicial como parâmetro. Pode ser

    qualquer coisa (object, number, string...) Dois valores devem ser desestruturados em um array: a variável que representa o state desejado e uma função para mutar este state
11. 11.

    useEffect É o equivalente ao componentDidMount, componentDidUpdate e componentWillUnmount O

    segundo parâmetro é uma lista de valores que fazem o trigger do side effect; quando a lista é vazia, o React entende que não precisa executar o efeito novamente A função passada como primeiro parâmetro é o side effect em si
12. 12.

    E vários outros oficiais... • useContext • useReducer • useCallback

    • useRef • useLayoutEffect • useDebugValue https://reactjs.org/docs/hooks-reference.html
13. 13.

    ...e da comunidade https://github.com/rehooks/awesome-react-hooks https://usehooks.com

14. 14.

    ProTips™ • Não invoque Hooks dentro de condicionais, loops ou

    funções aninhadas; • Use Hooks apenas em Componentes Funcionais (ou dentro de Hooks personalizados); • Você pode (e deve!) utilizar um Hook várias vezes para propósitos diferentes (ex.: múltiplos valores no state, lógicas de side effect diferentes…) • Use o eslint-plugin-react-hooks
15. 15.

    Aprenda mais sobre Hooks • Documentação: https://reactjs.org/docs/hooks-intro.html • Podcast: https://syntax.fm/show/092/react-hooks

    • Talk do Dan Abramov, Sophie Alpert e Ryan Florence (core team do React): https://www.youtube.com/watch?v=dpw 9EHDh2bM • Post do Dan “Making Sense of React Hooks”: https://dev.to/dan_abramov/making-sen se-of-react-hooks-2eib
16. 16.

    Obrigado! Slides disponíveis em https://speakerdeck.com/mathcale