React Hooks
- 1. React Hooks João Marins & Caio Flores
- 4. Notice 4 This is not the official documentation. React Hooks are in alpha version.
- 5. Topics 5 - Motivation - Proposal + RFC - React Core - What are hooks? - Function x Class components - Hooks API - When/How to use? - When/How not to use? - Should I refactor? - Examples - Opportunities
- 6. 6 Motivation - It’s hard to reuse stateful logic between components - Complex components become hard to understand - Classes confuse both people and machines
- 7. Motivation 7 “Hooks let you use more of React’s features without classes.”
- 10. 10 What are hooks? “Hooks are functions that let you ‘hook into’ React state and lifecycle features from function components.”
- 11. 11 But what are Function Components?
- 12. 12 Function x Class components
- 13. Hooks API: Initial implementation 13 - useState - useContext - useEffect - useRef - useReducer - useCallback - useMemo - useAPI
- 14. When/How to use? 14 - Only call hooks from React Functions - Share state management logic
- 16. Before you ask me... 16
- 17. When/How not to use? 17 Hooks can be dangerous
- 18. When/How not to use? 18 Do not use it inside: - Loops - Conditions - Nested functions and … - Hooks
- 19. Should I refactor my codebase? 19
- 20. Examples 20
- 21. More examples 21 - https://github.com/jgcmarins/react-hooks- examples - https://github.com/caioflores/react-hook- examples
- 22. Opportunities 22 - Blog posts - Libraries - Learn more about react core
- 23. What is next? 23
- 24. Concurrent Mode & Suspense for Data Fetching & More functional programming 24 https://reactjs.org/blog/2018/11/27/react-16-roadmap.html
- 25. - https://reactjs.org/docs/hooks-intro.html - https://reactjs.org/docs/hooks-overview.html - https://reactjs.org/blog/2018/11/27/react-16-roadmap.html - https://blog.kentcdodds.com/useeffect-vs-uselayouteffect-vs- usemutationeffect-6a3ee231304a - https://github.com/este/este/tree/master/hooks - https://github.com/jaredpalmer/formik/pull/1063 - https://medium.com/@ryardley/react-hooks-not-magic-just-arrays- cd4f1857236e Links 25
- 26. Thanks!!! 26
- 27. Give me a feedback about this talk 27