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
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