Thread by @chrisachard

Want to learn hooks, but you've been too busy? ⏲

🔥 Here's a mini crash course just for you! 🔥

(code links at the end)

#React #javascript

THREAD 👇

1/9

Add state to function components by calling `useState`

and pass in the initial value

2/9

`useState` returns 2 values in an array:

1. the current value of the state
2. a function to update the state

3/9

Call hooks at the top level of a function, and NOT in if statements or loops.

This is required for React to internally keep track of the hook values.

4/9

Perform asynchronous actions and actions with side effects in the `useEffect` hook

That way, async actions still work across multiple renders

5/9

`useEffect` takes an array of dependencies as the second argument

THIS IS IMPORTANT! Skipping the dependency list can result in infinite loops, or code that doesn't run when you think it should

6/9

Write custom hooks as function that start with the word `use`

Then use any built in hooks you want

and return (or not) and values and functions

7/9

There are many other built in hooks, but they all follow similar patterns

Get the complete list here: reactjs.org/docs/hooks-ref…

8/9

That's it! You can now add state and long-running effects to function components.

Class components aren't dead, but hooks do help clean up some component logic.

9/9

Here are links to code you can try out!

useState
codesandbox.io/s/react-hooks-…

useEffect
codesandbox.io/s/react-hooks-…

Custom Hook
codesandbox.io/s/react-hooks-…