No history yet

Introduction to React Hooks

A New Way to Write React

For a long time in React, if you needed your component to have its own internal data, or "state," you had to write it as a JavaScript class. These class components worked, but they could be a bit clumsy. They required more boilerplate code and a confusing this keyword that often tripped up developers.

Functional components were simpler and easier to read, but they were limited. They couldn't hold state or tap into lifecycle events, like running code right after the component appears on screen. They were great for just displaying information, but not for much else.

This created a divide: simple components were easy, but as soon as you needed them to be interactive, you had to convert them into a more complex class structure.

React Hooks changed everything. Introduced in React 16.8, they are special functions that let you “hook into” React features from your functional components.

Hooks are functions that let you use state and other React features in function components.

This means you can now write your entire application with simpler, cleaner functional components. Hooks make code more reusable, easier to test, and more intuitive to write. Let's look at the two most fundamental hooks: useState and useEffect.

Giving Components Memory with useState

The most common reason to use a hook is to add state to a component. Think of state as a component's short-term memory. It’s any data that can change over time and should cause the component to re-render when it does.

The useState hook is how you do this. When you call useState, you are declaring a single piece of state. You pass the initial value as an argument, and it returns two things in an array: the current state value and a function to update it.

import React, { useState } from 'react';

function Counter() {
  // Declare a new state variable called "count"
  // The initial value is 0
  const [count, setCount] = useState(0);

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

In this example, useState(0) initializes our state. The current value, count, is set to 0. The function setCount is what we use to change the value of count. When the button is clicked, we call setCount with the new value (count + 1), which tells React to re-render the component with the updated count.

Handling Side Effects with useEffect

What if your component needs to do something that isn't directly related to rendering, like fetching data from an API, setting up a subscription, or manually changing the browser's DOM? These actions are called "side effects."

The useEffect hook is the place for them. It runs a function after React has updated the DOM. Think of it as a way to say, "After you're done drawing everything, run this extra code for me."

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

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

  // This effect runs after every render
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>Check the browser tab title!</p>
      <button onClick={() => setCount(count + 1)}>
        Click me to update title
      </button>
    </div>
  );
}

Here, useEffect takes a function as its argument. After the TitleUpdater component renders (either for the first time or after setCount is called), React will run the function inside useEffect, updating the document's title. This neatly separates the side effect logic from the rendering logic.

By default, useEffect runs after every single render. You can also configure it to run only when specific values change, but for now, just know it's the go-to tool for handling actions outside the component's main rendering job.

Time to check what you've learned about the basics of React Hooks.

Quiz Questions 1/5

What was the main problem React Hooks were designed to solve?

Quiz Questions 2/5

What does the useState hook return?

useState and useEffect are the building blocks for most interactions in modern React applications. Mastering them is the first step toward writing cleaner and more powerful components.