React Hooks - Componentes funcionais (mais) inteligentes

React Hooks - Componentes funcionais (mais) inteligentes

11d2474c8637940299cecf8661a46687?s=128

Matheus Calegaro

April 11, 2019
Tweet

Transcript

  1. 5.

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

    Mais trabalho para iniciantes Reutilização difícil
  2. 6.
  3. 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
  4. 9.

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

    uma forma mais elegante! ProTip™: todo Hook possui o prefixo “use”
  5. 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
  6. 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
  7. 12.

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

    • useRef • useLayoutEffect • useDebugValue https://reactjs.org/docs/hooks-reference.html
  8. 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
  9. 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