This document introduces React hooks, which are functions that allow you to "hook into" React features like state and lifecycle methods from function components. The main hooks discussed are useState, which allows adding local state to function components, and useEffect, which allows performing side effects from functions. Rules for using hooks properly are also covered.

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!!!