What Are React Hooks? Explained for Beginners

If you are searching for "what are React hooks", here is the short answer: a hook is a special function that lets a React component use features like memory (state) and side effects. Hooks always start with the word "use", such as useState and useEffect. In this guide you will learn what hooks are, why they exist, the two rules you must follow, and how to try them in small examples.

You do not need any earlier React knowledge beyond knowing what a component is. Every new word is explained the first time we use it.

What is a React hook?

A React component is a function that returns some HTML-like code (called JSX) to show on the screen. By default, that function is very simple. It runs, returns the screen, and forgets everything. It cannot remember a number a user clicked, and it cannot load data from a server.

Hooks fix this. A hook lets you "hook into" React's built-in features from inside your function. Think of a hook as a plug that connects your plain function to a power socket that React provides.

• useState gives a component a memory, so it can remember values between renders.
• useEffect lets a component do work outside the screen, such as loading data or setting a page title.
• useRef, useContext and others exist too, but you can start with the first two.

Why does React have hooks?

Before hooks (before 2019), a component that needed memory had to be written as a class, which is a longer and harder style of code. Hooks let you do the same thing with a short, plain function. Today, almost all new React code uses function components with hooks.

Your first hook: useState

State is data that a component remembers and that can change. When state changes, React redraws the component. Here is a counter.

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      You clicked {count} times
    </button>
  );
}

export default Counter;

Line by line: the first line imports the hook from React. Inside Counter, useState(0) creates a piece of state that starts at 0. It returns two things: the current value (count) and a function to change it (setCount). We grab both using array destructuring, which is just a short way to name the two items. In the button, each click calls setCount with count + 1. React then runs Counter again and shows the new number.

Want more detail on this one? Read our full guide to the useState hook, linked below.

Your second hook: useEffect

A side effect is anything a component does besides drawing the screen. Examples are changing the browser tab title, starting a timer, or fetching data. You put side effects inside useEffect.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = 'Clicks: ' + count;
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      Click me ({count})
    </button>
  );
}

export default TitleCounter;

The function inside useEffect runs after React draws the component. Here it sets the browser tab title to show the count. The array at the end, [count], is called the dependency array. It tells React: "only run this effect again when count changes". If you pass an empty array [], the effect runs just once, when the component first appears.

The two rules of hooks

React needs hooks to be called in the same order every time a component runs. That is how it matches each hook to its stored value. To keep this true, there are two simple rules.

1. Only call hooks at the top level of your component. Never put a hook inside an if statement, a loop, or a nested function.
2. Only call hooks from React function components (or from your own custom hooks). Do not call them from normal JavaScript functions.

Here is a common mistake and its fix.

// Wrong: the hook is inside an if
function Profile({ loggedIn }) {
  if (loggedIn) {
    const [name, setName] = useState('');
  }
  return <p>Hello</p>;
}

// Right: the hook is at the top level
function Profile({ loggedIn }) {
  const [name, setName] = useState('');

  if (!loggedIn) {
    return <p>Please log in</p>;
  }
  return <p>Hello {name}</p>;
}

In the wrong version, the hook might run on one render and be skipped on the next, which confuses React. In the right version, useState is always called first, and the if comes after. If you need a condition, put it below your hooks or inside the hook's function.

Build your own hook

A custom hook is your own function whose name starts with "use" and that calls other hooks. It lets you reuse logic in many components. This one keeps a toggle (on or off) value.

import { useState } from 'react';

function useToggle(start = false) {
  const [on, setOn] = useState(start);
  const toggle = () => setOn(!on);
  return [on, toggle];
}

function LightSwitch() {
  const [on, toggle] = useToggle();
  return (
    <button onClick={toggle}>
      The light is {on ? 'on' : 'off'}
    </button>
  );
}

useToggle stores a true/false state and returns the current value plus a function to flip it. The default start = false means it begins as off if you pass nothing. LightSwitch calls the hook and uses the result. The text uses a ternary, a short if/else written as condition ? a : b. Any component can now call useToggle without repeating the code.

Common beginner mistakes

• Changing state directly, like count = count + 1. Always use the setter function, such as setCount.
• Forgetting the dependency array in useEffect, which can make the effect run on every render.
• Calling a hook inside an if or a loop.
• Forgetting to import the hook from 'react' at the top of the file.

Where to go next

Now that you know what hooks are, practise with useState and useEffect in small projects, like a counter, a to-do list, or a simple timer. Once those feel natural, look at useRef and useContext. Take it one hook at a time.