Intro session covering the basics of React Hooks.

1. INTRODUCTIONTO REACT HOOKS
Felicia O’Garro | Code Crew | March 25, 2021

2. WHAT ARE REACT HOOKS?
• New addition in React 16.
8
• Functions that let you “hook into” React features from function component
s
• They don’t work inside of classe
s
• No breaking changes or rewrite
s
• You can build your own

3. REACT HOOKS API
• useStat
e
• useEffec
t
• useContex
t
• useReduce
r
• useCallbac
k
• useMem
o
• useRe
f
• useImperativeHandl
e
• useLayoutEffec
t
• useDebugValue

4. WHY HOOKS?
• Allows you to reuse stateful logic without changing your component
hierarchy
• Allows you to break larger components down to smaller function
s
• You can use more of React features without using classes

5. STATE IN CLASS COMPONENTS

6. USE STATE
• Used to add local state to a function
component
• State is preserved during re-render
s
• Returns the current state value and a
function that lets you update it

7. ARRAY DESTRUCTURING
• Allows us to assign different names to
the state variables declared by calling
useStat
e
• Extract representations from the data
fed into layers

8. USE STATE IN ACTION

9. USE EFFECT
• Adds the ability to perform side effects
from a functio
n
• Serves the same purpose as certain
lifecycle hooks

10. LIFECYLE METHODS

11. SIDE EFFECTS IN CLASS COMPONENTS

12. EFFECTS RENDERING
• [] - only run during initial rende
r
• nothing - run during initial render and after every re-rende
r
• [data] - run at initial render and after every re-render if data has
changed since the last re-render

13. USE EFFECT IN ACTION

14. RULES OF HOOKS
• Only call Hooks at the top level
• Only call Hooks from React functional component
s
• ESLint con
fi
guration

16. RESOURCES
• React Docs
• Modern React with Redux Course
• Full React Course 2020
• React Lifecycle Methods Diagram

17. THANKS MUCH!!!