React Hooks - Componentes funcionais (mais) inteligentes

Transcript

1. React Hooks Componentes funcionais (mais) inteligentes

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

3. 2 formas de criar componentes Class component Functional component

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

   • Lógica específica • HOCs

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

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

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. Hooks! * disponível a partir da versão 16.8 do React

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

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

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. 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. E vários outros oficiais... • useContext • useReducer • useCallback

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

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

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. 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. Obrigado! Slides disponíveis em https://speakerdeck.com/mathcale