Hooked on React: A useState & useEffect Adventure (Like Leveling Up in Zelda)

The Quest Begins (The Why)

The author recalls their first attempt at building a simple counter in React using a class component. They struggled with a clunky this.setState call and had to implement componentDidMount and componentWillUnmount methods to fetch data upon mounting. A bug caused the count to jump two steps every time they clicked, leading to frustration as they tried to debug the issue.

This experience left them feeling like they were fighting a final boss with a broken sword, putting in a lot of effort for little payoff. This frustration motivated them to explore hooks, despite initial skepticism about whether they would actually simplify their development process. Little did they know, they were about to discover a spell that would transform their class incantations into elegant, functional incantations.

The Revelation (The Insight)

The turning point occurred when the author realized that useState and useEffect were not just new APIs, but rather a different way of thinking about state and side effects. With useState, they gained a pair: the current state value and a setter function. No more dealing with this.state or this.setState. With useEffect, they learned to tell React to run a function after rendering and optionally clean up when the component unmounts or before the effect runs again.

The dependency array was the key to mastering this concept: it instructed React on exactly when to re-run the effect, preventing those pesky infinite loops. It felt like swapping out a heavy, rickety backpack for a lightweight, modular utility belt. With hooks, they only carried what was necessary for each quest, and they could swap out custom hooks without having to rebuild the entire component. Wielding the Power (Code & Examples)

Before using hooks, the author had a class component with a counter and data fetching functionality. The class included a state object with count, data, and loading properties, as well as componentDidMount, componentDidUpdate, and componentWillUnmount methods. The fetchData method handled aborting any ongoing fetches, setting the loading state to true, and using fetch to retrieve data from an API.

The render method displayed the count, a button to increment it, the loading message if applicable, and the fetched data if available.

After adopting hooks, the author rewrote the CounterWithFetch function. They used the useState hook to manage the count state and the useEffect hook to handle data fetching. The count state was initialized to 0. The useEffect hook ran after the initial render and included a dependency array containing the count state, ensuring that the effect would only run when the count changed.

Inside the effect, they aborted any previous fetches, set the loading state to true, and used fetch to retrieve data from the same API. The render method remained largely unchanged, displaying the count and data as before.