Slides I wrote about React Hooks to speak at 28th Meetup React SP.

1. React Hooks
João Marins & Caio Flores

2. João Marins
@jgcmarins @jgcmarins
2

3. Caio Flores
@caioflores @caiopflores
3

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

8. Proposal + RFC
8
https://github.com/reactjs/rfc
s/pull/68/

9. React Core
9
https://github.com/facebook/
react/pull/13968/

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

15. When/How to use?
15

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