Hello everyone, thank you for coming. My name is Kyle West. This is Gabe Dayley.
Today we are going to talk to y'all about hooks. Specifically, we want to visit the internal workings of hooks - by rebuilding them!
These are the hooks we plan on taking a closer look at. But before we do, we just wanted to refresh your memory on what each of these do, and what their API looks like.
The QR code in the corner will take you to the react docs if you are interested.
Let's talk about state.
- State is information that drives the application
- The UI should be a function of the state (i.e., "react" to state changes)
- Data is NOT considered state if it:
- cannot change during the life of the app
- changes, but the UI should not update
useEffect allows us to run arbitrary code when there is a change on a subscribed state
Although references can change their current values, they are not considered state because the UI does not react to data updates.
Memoization is simply the act of caching a value instead of computing a result every time
You could use useMemo to cache a function reference (to attempt creating a stable identity), but instead you can just use the useCallback hook which wraps useMemo
useReducer is like useState, but with a more declarative API in some contexts. It is particularly ideal when multiple state items depend on other state, or needed to be updated in lockstep.
Alright, let's look at some code!
TODO: consider adding a code sandbox for people to follow along