React’s hooks (in particular useState and useEffect) are deceptively simple. At first glance, it feels like: state goes into useState, side effects go into useEffect. But in real-world apps, things get messy quickly: bugs from re-renders, race conditions, and code that’s harder to reason about than it should be.

Let’s break down when to use state, when not to, and why overusing useEffect is harmful.

1. What belongs in State?

A common mistake is to throw everything into useState. But not all data needs to be stateful. Here’s a good rule of thumb: