useHooks

An introduction to React Hooks with examples and how it could help simplify existing React components from issues like Wrapper Hell and distributed/repeating logic.

Transcript

2. KARTIK LAD | DEVELOPER | @KARTIKLAD useHooks
3. FUNCTION COMPONENTS CLASS COMPONENTS
4. Distributed logic Unrelated code is grouped together while related code is split across lifecycle methods Issues with React components Where is the State? Function components can’t use State ¯\_(ツ)_/¯ this.function.bind(this) Having to bind this to functions to allow access react internals
5. WRAPPER HELL What reusing stateful login looks like today
6. Introducing s
7. THE GOOD STUFF • Don’t have to worry about `this` or `class` • Typing is easier • Simplify large components by splitting up related pieces into smaller functions • Reuse stateful logic • Use React features without classes • Backward compatible and works side-by-side with your existing codebase.
8. Only call hooks from React Call hooks from React function components or other custom hooks Use the Eslint plugin Do yourself a favour and use eslint-plugin-react-hooks.. This way you wont forget any of the above rules Only call hooks at top level Don’t call Hooks inside loops, conditions, or nested functions Rules of Hooks
9. Only call hooks from React Call hooks from React function components or other custom hooks Use the Eslint plugin Do yourself a favour and use eslint-plugin-react-hooks. This way you wont forget any of the above rules Only call hooks at top level Don’t call Hooks inside loops, conditions, or nested functions Rules of Hooks
10. Only call hooks from React Call hooks from React function components or other custom hooks Use the Eslint plugin Do yourself a favour and use eslint-plugin-react-hooks. This way you wont forget any of the above rules Only call hooks at top level Don’t call Hooks inside loops, conditions, or nested functions Rules of Hooks
11. useState is a hook that lets you attach React state to a function component. useState
12. BEFORE AFTER
13. BEFORE AFTER
14. Use this hook to tell React that your component needs to do something after every render. useEffect
15. BEFORE AFTER
16. useEffect(() => { // add effect return () => { // remove effect } }, [/* when to clean up */]) SSR friendly!

17. Similar to useEffect, except it is synchronous and blocks rendering on the browser useLayoutEffect Not SSR friendly
 ⚠
18. Allows function components to have something like instance properties in classes useRef
19. const isValid = useRef(‘some value’); // You can pass anything as default value // Access the value isValid.current = true; If (isValid.current) { … } // ⚠ This is always true If (isValid) { … }
20. Accepts context object from React.createContext and returns the current context value. useContext
21. BEFORE AFTER
22. useYourImagination aka Custom Hooks useCount.js NewCounter.js
23. useReducer useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue useState useEffect useContext BASIC ADDITIONAL
24. useReducer
25. useCallback
26. useMemo
27. useDebugValue
28. GITHUB | TWITTER | LINKEDIN @KARTIKLAD Thank you