React Hooks

In the last lesson you learned about React Form Validation, where you kept calling useState without anyone explaining what it really is. This lesson is your map of hooks, the special functions that power modern React.

🤔 Why do hooks exist?

To get why hooks matter, you have to know what React was like before them.

• In the early days, only class components could hold state or run code at certain moments. So if a function component needed to remember anything, you had to rewrite it as a class.
• Classes brought a lot of extra baggage. The this keyword, constructor, binding methods, lifecycle methods with confusing names. A lot to learn just to store one number.
• The same logic often got scattered across different lifecycle methods, so related code lived far apart and was hard to follow.

Then in React 16.8, hooks arrived and changed everything.

• Hooks let plain function components do everything classes could do, like holding state and running side effects.
• No more this, no more classes for most work. Just simple functions and a few use calls.

🪝 What is a hook?

A hook is a special function that lets a function component “hook into” React features like state and lifecycle.

• A hook is just a function whose name starts with use. That naming is the rule, not a suggestion.
• When you call a hook inside a component, you’re plugging an extra power into that component, like memory or a way to run code after rendering.
• React ships several hooks built in, and you can also write your own.

Think of a hook like a plug in a wall. The function component is the lamp. By itself the lamp does nothing, but plug it into a use socket and suddenly it has power.

🎉 You’ve already used one

Here’s the nice surprise. You’ve been using a hook all along without thinking of it that way.

• Every time you wrote useState, you were calling a hook. Its name starts with use, so it qualifies.
• It gave your function component memory, a value that stays around between renders.
• So the idea isn’t new to you. You already know what it feels like to use a hook.

This is the line you’ve written many times. It’s the most common hook in all of React.

const [count, setCount] = useState(0);

So useState is hook number one in your toolbox. The rest of this lesson introduces the others you’ll meet soon.

🧰 A quick tour of the common hooks

React gives you a handful of built-in hooks for the everyday jobs. You don’t need to memorize them now. Just get a feel for what each one is for.

• useState adds memory to a component, a value it can read and change.
• useEffect runs code after the screen updates, for things like fetching data.
• The rest cover references, shared data, and speed. We’ll meet them all properly later.

Here’s the whole set in one place. Treat this table as a cheat sheet you can come back to.

🛠️ Custom hooks: build your own

Once you understand the built-in ones, you can package your own logic into a hook too.

• A custom hook is just a function you write whose name starts with use and that calls other hooks inside it.
• You make one when the same stateful logic shows up in more than one component, so you write it once and reuse it.
• It’s not a new React feature. It’s only a normal function that follows the naming and reuses the built-in hooks.

Here’s a tiny custom hook that tracks a window’s width. Notice it starts with use and uses useState inside.

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  // ...later you'd update width when the window resizes
  return width;
}

So a component can just call const width = useWindowWidth() and get the value, without knowing how it works inside. We’ll build real custom hooks in a later lesson.

⚠️ Hooks have a couple of rules

Hooks are simple to use, but they come with two rules you must follow, or React gets confused.

• Only call hooks at the top level of a component. Don’t call them inside an if, a loop, or another function.
• Only call hooks from React function components or from your own custom hooks. Not from regular JavaScript functions.

function Profile() {
  // ✅ Right - called at the top level of the component
  const [name, setName] = useState("Alex");

  // ❌ Wrong - never call a hook inside a condition
  // if (name) {
  //   const [age, setAge] = useState(0);
  // }

  return <p>{name}</p>;
}

🧩 What You’ve Learned

• ✅ A hook is a special function, with a name starting with use, that lets function components use React features
• ✅ Before hooks, only class components could hold state or run lifecycle code; hooks brought those powers to simple functions
• ✅ You’ve already used a hook every time you called useState
• ✅ The common built-in hooks are useState, useEffect, useRef, useContext, useMemo, and useCallback
• ✅ useState and useEffect are the two you’ll reach for most often
• ✅ A custom hook is your own function that starts with use and reuses other hooks, so you can share logic
• ✅ Always call hooks at the top level and only from components or custom hooks

🚀 What’s Next?

Now you know what hooks are, why they exist, and the common ones you’ll meet. Before you dive into each hook, there are a couple of rules every hook must follow, and getting them right will save you a lot of confusing bugs.

React Rules of Hooks