Understanding React Hooks

I'll admit it—I was resistant to hooks at first. I'd gotten comfortable with class components. I understood the lifecycle methods. Why change something that worked?

But then I started working on a project where everyone was using hooks, and I felt like I was writing code from 2018. So I forced myself to learn them, and honestly? I wish I'd done it sooner.

The first hook I really understood was useState. It's simple—you call it, you get back a value and a setter. But wrapping my head around how it worked took some time. Where does the state live? How does React know which component it belongs to? The answer is that React keeps track internally. Each component gets its own "memory" of what hooks were called. That's why the rules exist—hooks must be called in the same order every time, and only at the top level.

useEffect took me longer to figure out. At first, I was using it like componentDidMount—just run this once when the component loads. But that's not really what it's for. The dependency array is what makes it powerful. Want to run something when a value changes? Put it in the array. Want it to run once? Empty array. Want it to run every render? No array. Once I understood that pattern, it clicked.

Custom Hooks Changed Everything

The real game-changer was custom hooks. I could extract logic into reusable functions. Need to fetch data? useFetch. Need to track window size? useWindowSize. It's just JavaScript functions, but they can use hooks inside.

I started seeing patterns in my code. The same logic kept appearing in different components. Custom hooks let me write it once and reuse it everywhere. I'd find myself building up a library of hooks over time—useDebounce, useLocalStorage, useMediaQuery. Each one solved a specific problem, and once I had it, I could use it anywhere.

The rules seemed arbitrary at first. Why can't I call hooks conditionally? Why do they have to be at the top level? But once I understood how React tracks them internally, it made sense. Breaking the rules breaks React's ability to manage state correctly. Also, you don't need to use hooks for everything. Sometimes a regular function is fine. Sometimes a class component is still the right choice. Hooks are a tool, not a requirement.

I'm still learning new patterns and discovering better ways to structure things. But hooks made my code simpler and more reusable. That's worth the learning curve.

---

Note: This is a mock-up post created as part of the Feather blog template demonstration. The content is provided as an example to showcase the blog's features including markdown rendering, search functionality, tags, and more.

Feather is a blog template built for Next.js. You can use these example posts as a reference when creating your own content.