Understanding useEffect — The Hook I Got Wrong for Months

I used useEffect for months before I actually understood it. I knew the syntax. I could make it work . But I had a collection of habits I'd picked up by trial and error — like always adding // eslint-disable-next-line react-hooks/exhaustive-deps when the linter complained, or passing an empty array [] whenever I just wanted something to run once. It worked. Until it didn't. And when it didn't, I had no idea why. This post is the explanation I wish I'd had from the start. What useEffect Actually Is Most tutorials explain useEffect as a way to run "side effects" — data fetching, subscriptions, manually touching the DOM. That's true, but it doesn't help you think about it correctly. Here's a better mental model: useEffect lets you synchronize your component with something outside of React. That "something" could be an API, a browser API like document.title , a timer, a WebSocket — anything that lives outside React's render cycle. Every time your component renders, React checks whether the