Published or updated on November 02, 2019
You probably haven't heard, but React released a minor feature last year called "hooks".
It mostly flew under the radar, but I think it's pretty a useful addition and wanted to visually explain how it works.
Luckily Joe Previte was on my wavelength.
He's one of the instructors at egghead who put together a whole course on creating your own custom React hooks (next level!)
You can take a look at Shareable Custom Hooks in React if you're curious about building and publishing your own hooks on NPM.
The course is great in and of itself... but I know why you're here – illustrations!
I diligently worked through Joe's material and turned a few of the highlights into illustrated notes.
The course doesn't cover much about the basics of hooks. So I added some TLDR explanations of what hooks do, including how everyone's faves useState and useEffect work. The notes are more of a primer than a comprehensive summary of what Joe dives into.
For those already comfortable with hooks, you'll like the sections that cover the publishing pipeline – how to isolate your personal hooks, and prepare them for public use on NPM.
I'll make sure to let you know if React changes anything else in the codebase. These things tend to get lost while the community is busy fawning over jQuery updates...
A high-res & printable version of the notes, plus the full course is avaliable here on the Shareable Custom Hooks in React page.