How React Hooks changed everything

When React 16.8 shipped Hooks back in February, I'll admit I was skeptical. Class components were my daily reality, and I had learned to live with their quirks. But after a few days with useState and useEffect, it was clear: this isn't a new feature. It's a new way of thinking.

Less scaffolding, more logic

What surprised me most was how much ballast suddenly disappeared. No more this, no binding in the constructor, no logic scattered across componentDidMount and componentWillUnmount that really belonged together. With Hooks, related logic finally lives together too.

A component should read like a clear thought, not like a transcript of lifecycle events.

An example from my everyday work:

function ProfileCard({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);

  return user ? <Card data={user} /> : <Spinner />;
}

This used to require a class component with state, a constructor, and two lifecycle methods. Now it's a handful of lines that say exactly what they do.

Reuse that feels right

The real breakthrough for me, though, is custom Hooks. Logic I used to share painstakingly through higher-order components or render props can now live in its own function — useScrollPosition, useMediaQuery, useFetch. It doesn't feel like a trick. It feels like the native language of React.

That's what good tools are about to me: they don't reduce complexity by hiding things, but by letting you think more clearly. Hooks have made my components smaller, more honest, and easier to test.

There are pitfalls, of course. The useEffect dependency array wants to be understood, and the rules — only call Hooks at the top level, only inside components — aren't up for negotiation. But those are small prices for a big gain.

I'm convinced that a year from now we'll look back and see class components for what they were: a good intermediate step. The future is written with functions.