What Are React Hooks? A Beginner’s Guide with Examples

React Hooks are one of the most powerful features introduced in React 16.8. They allow developers to use state and other React features in functional components, eliminating the need for class-based components in many cases.

Whether you’re new to React or transitioning from class components, understanding Hooks is essential for building clean, modern, and maintainable React applications.

In this beginner-friendly guide, we’ll explore what Hooks are, why they were introduced, and how to use them effectively with real-world examples.

What Are React Hooks?

Hooks are functions that let you use state and lifecycle features in React functional components. Before Hooks were introduced, state management and lifecycle methods like componentDidMount or componentWillUnmount were only available in class components.

Hooks enable you to:

• Use state in functional components
• Run side effects such as data fetching or timers
• Share logic across components through custom Hooks

Hooks are backward-compatible and do not break existing code. They simply provide a cleaner and more functional approach to building React components.

Why Were Hooks Introduced?

React Hooks solve several issues that were common with class components:

1. Reusing Logic
   With classes, sharing stateful logic between components was difficult and required patterns like higher-order components (HOCs) or render props. Hooks allow logic to be extracted into reusable functions called custom Hooks.
2. Component Complexity
   Large class components often become difficult to read and maintain due to scattered logic across lifecycle methods. Hooks keep related logic closer and more organized.
3. Better Functional Programming
   Hooks align better with JavaScript’s functional programming style and reduce reliance on this, making code easier to understand and less error-prone.

Rules of Hooks

Before using Hooks, keep in mind the two key rules:

• Only call Hooks at the top level
  Do not call Hooks inside loops, conditions, or nested functions. Always use them at the top level of your functional component.
• Only call Hooks from React functions
  Hooks should only be used in functional components or within custom Hooks — not in regular JavaScript functions or class components.

Built-In React Hooks (with Examples)

1. useState – Add State to Functional Components

import React, { useState } from 'react';

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

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

• useState returns a state variable and a function to update it.
• The argument passed to useState (in this case, 0) is the initial state.

2. useEffect – Handle Side Effects (Data Fetching, Subscriptions, etc.)

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    return () => clearInterval(interval); // cleanup
  }, []);

  return <p>Timer: {seconds}s</p>;
}

• useEffect runs after the component renders.
• The second argument ([]) controls when it runs. An empty array means it runs only once on mount.
• It supports cleanup functions, useful for removing timers or listeners.

3. useContext – Access Global State with Context API

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function ThemedButton() {
  const theme = useContext(ThemeContext);

  return <button style={{ background: theme.background, color: theme.color }}>Click Me</button>;
}

• useContext makes it easy to consume global values without passing props manually.

4. useRef – Persist Values Across Renders Without Causing Re-Renders

import React, { useRef, useEffect } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} placeholder="I am focused on load" />;
}

• useRef is often used to reference DOM elements or store mutable values.

5. useMemo and useCallback – Optimize Performance

import React, { useMemo } from 'react';

function ExpensiveCalculation({ number }) {
  const result = useMemo(() => {
    console.log('Calculating...');
    return number * 2;
  }, [number]);

  return <p>Result: {result}</p>;
}

• useMemo caches a computed value unless dependencies change.
• useCallback works similarly but caches a function.

These Hooks help avoid unnecessary recalculations and re-renders.

Custom Hooks

You can create your own Hooks to extract and reuse stateful logic across components:

import { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

Use it in any component:

function MyComponent() {
  const width = useWindowWidth();
  return <p>Window width: {width}px</p>;
}

When to Use Hooks

Use Hooks in functional components when:

• You need to manage component state
• You want to perform actions after render (e.g., fetch data)
• You need to optimize performance or cache values
• You want to simplify your logic or avoid writing class components

Hooks are not optional anymore. In modern React development, especially with frameworks like Next.js or Remix, Hooks are used extensively.

Final Thoughts

React Hooks have revolutionized the way developers build components. They simplify the code, encourage reusable logic, and eliminate the need for class components in most cases. By learning and mastering Hooks, you become well-equipped to build modern, maintainable, and scalable React applications.

If you’re starting out with React, begin with the most commonly used Hooks like useState and useEffect. As your application grows, you’ll naturally adopt others like useContext, useRef, and custom Hooks to write cleaner and more organized code.