Recommended
More Related Content
What's hot
What's hot (8)
Similar to React Hooks
Similar to React Hooks (20)
Recently uploaded
Recently uploaded (20)
React Hooks
- 1. Caio Flores e João Marins React Hooks
- 2. Caio Flores CTO at sigalei @caioflores @caiopflores
- 3. Topics ● Motivation ● What are hooks? ● How to use? ● Examples ● Now what? ● Opportunities ● Links
- 4. Motivation
- 5. Motivation ● Reuse code ● Complex components are hard to understand ● Classes are confusing
- 6. Motivation ● 09/2018 - Hooks at Facebook ● 25/11/2018 - RFC (react 16.7.0-alpha.0) ● React 16.7: Hooks (~Q1 2019) https://github.com/reactjs/rfcs/pull/68/
- 8. “Hooks are functions that let you 'hook into' React state and lifecycle features from function components.”
- 10. How to use?
- 11. How to use?
- 12. How to use? When/How not to use?
- 13. How to use? ● Don't call hooks inside loops, conditionals or nested functions ● Don't call hooks from regular JS functions
- 14. How to use?
- 15. Examples!
- 17. Now what?
- 18. Now what? ● Don't rewrite everything, adopt gradually ● No breaking changes ● Hype? ● Opportunities!
- 19. Now what?
- 20. Links ● Hooks: https://reactjs.org/hooks ● Hooks API: https://reactjs.org/docs/hooks-reference.html ● Hooks RFC: https://github.com/reactjs/rfcs/pull/68 ● Example: https://github.com/caioflores/react-hook- examples ● React Roadmap: https://reactjs.org/blog/2018/11/27/react-16- roadmap.html ● React RFCs: https://github.com/reactjs/rfcs
- 21. Caio Flores CTO at sigalei @caioflores @caiopflores João Marins Full Stack Developer at Entria @jgcmarins @jgcmarins Thank you!
Editor's Notes
- 1 - HOC tentam resolver o reuso de "stateful logic" entre componentes 2 - Componentes complexos tem muita lógica nos lifecycles, isso deixa difícil de entender e testar. Hooks permitem que você consiga separar a lógica do seu componente em funções menores, tornando menos complexo e mais fáceis de testar e reusar. 3 - Classes são confusas, é difícil entender como usar o this, dar bind nos métodos e elas não minificam bem.
- Não devem encontrar muitos bugs já RFC = Request for comments
- Basicamente é uma forma de vc conseguir manipular o estado e o lifecyle de componentes funcionais
- useImperativeMethods customizes the instance value that is exposed to parent components when using ref
- 1) Ele usa a ordem das chamadas para organizar vários useState e useEffect, por isso a primeira regra. 2) Para garantir que toda a lógica de estado de um componente esteja visível no seu código.
- 1) Ele usa a ordem das chamadas para organizar vários useState e useEffect, por isso a primeira regra. 2) Para garantir que toda a lógica de estado de um componente esteja visível no seu código.
- 1) Ele usa a ordem das chamadas para organizar vários useState e useEffect, por isso a primeira regra. 2) Para garantir que toda a lógica de estado de um componente esteja visível no seu código.
- Mostrar loading com useEffect que tem o mesmo efeito de um shouldUpdate, que só atualiza quando a prop realmente muda Mostrar o Input, enfatizando a criação de um hook próprio, e como podemos reaproveitar o código e deixar a estrutura do componente mais simples
- 1) O suporte para classes não vai acabar, teste hooks em códigos novos
- 1) O suporte para classes não vai acabar, teste hooks em códigos novos