Why we’ll all use React Hooks

This is the deck of my talk at FrontEnd Con 2018 (https://frontend-con.io/) in Warsaw, Poland on December 4th, 2018.

Hooks are a new feature proposal that lets you use state and other React features without writing a class. In this talk attendees could learn exactly what they are and how can they make React projects better.

Transcript

1. Why we’ll all use React Hooks 04.12.2018, Marcin Hagmajer, FrontEnd Con, Warsaw
2. https://www.react-rangers.com/
4. ƒ: data → UI ƒ ƒ
5. Impure requirements • component state • data fetching • animations • notifications • subscriptions • more…
6. Class components • constructor • render • setState • componentDidMount • componentDidUpdate • componentWillUnmount
8. Splitting of related code
9. Error prone
10. Difficult to reuse logic
11. Hooks Available today in React v16.7.0-alpha
12. ƒ: data → UI State Lifecycle Context
13. “In the longer term, we expect Hooks to be the primary way people write React components.”
14. useState - the state hook (1/2)
15. useState - the state hook (2/2)
16. useEffect - the side effect hook (1/2)
17. Class style subscriptions (recap)
18. useEffect - the side effect hook (2/3) Re-runs on every render
19. useEffect - the side effect hook (3/3) Limiting re-runs to dependency changes
20. useContext - the context hook (1/2)
21. useContext - the context hook (2/2) No additional Consumer wrapper required!
22. Rules of hooks • useYourHook naming • Only Call Hooks at the Top Level • Only Call Hooks from React Functions
23. It’s all about the order
24. Beware of conditionals No early returns from render either
25. Additional hooks • useReducer • useCallback • useMemo • useRef • useImperativeMethods • useLayoutEffects
26. Custom hooks (1/2)
27. Custom hooks (2/2)
28. 100% backward compatible “At Facebook, we have tens of thousands of components written as classes, and we have absolutely no plans to rewrite them.”