This Ain’t Your Grandma’s React IV: How Hooks Make Side Effects Make Sense

This is the fourth and final article on the difference between class-based and functional components. These articles are intended to help React developers who are making the switch from classes to functions, and find themselves irked when some of the mental models they’ve used with class-based components fail them with functional components.

The other articles in the series are as follows:

• This Ain’t Your Grandmas’s React: How Hooks Rewrote Your Understanding of Components
• This Ain’t Your Grandma’s React II: How State Works Without Classes
• This Ain’t Your Grandma’s React III: How Hooks Handle Dependencies

If you haven’t already read the first three, I’d recommend at least reading Parts One and Three. This part relies heavily on the discussion of closures and dependencies discussed in Part Three, and Part One will give you an overview of the differences.

Part Four is really the most exciting and different part of functional components. With class-based components, you create side effects in componentWillMount and componentDidUpdate, and clean them up in componentWillUnmount. With functional components, you create and break down individual side effects with useEffect and useLayoutEffect. The…