ReactHooks - freeCodeCamp.org

How to Simplify Your React Components with Derived State

Olaleye Blessing — Mon, 24 Nov 2025 20:58:35 +0000

React simplifies building user interfaces with hooks like useState for managing dynamic values. But it's common to overuse useState. This often leads to duplicated data and unnecessary complexity.

For instance, you might store a full name in state when it can be calculated from first and last name props, or duplicate fetched data from a library like React Query. This creates issues like harder debugging, extra re-renders, and synchronization problems.

In this tutorial, you'll learn how to use derived state to improve your components. By the end, you'll know when to derive state instead of storing it, making your React code cleaner and more maintainable.

Prerequisites
What Is a Derived State?
How to Derive State From Existing Data
How to Prevent Recalculation of a Derived State
When to Use useState
- Controlled Input
- Independent State Changes
Conclusion

Prerequisites

Before you move on, make sure you have:

Basic knowledge of JavaScript, TypeScript, React, and React hooks
Understanding of asynchronous calls
A simple React development setup.

If you don’t have a React development setup, you can head over to the derived-state repo. The repo has been set up with React Router and React Query. Run the commands below to set it up:

# clone the repo
git clone 

# navigate to the folder
cd freecodecamp-derived-states

# install the packages
pnpm install

# start development
pnpm dev

What Is a Derived State?

A derived state is any value that can be calculated from existing data. This existing data can be from:

Props: Data passed from a parent component.
Existing state: Other state variables already in your component.
URL parameters: Data from routes or query strings.
External data: Data from a fetching library like React Query.

Storing derivable state in useState can create several issues. First, it can cause debugging problems: more state variables make it harder to trace data flow. The more states you have, the more the number of state changes you need to keep track of while debugging.

It can also cause unnecessary re-renders. React will trigger a re-render every time you call the state setter function.

Finally, there can be synchronization issues, as you’re forced to update the “derived state” anytime the source data changes manually. When similar data exists in multiple states, they can get out of sync.

How to Derive State From Existing Data

Moving forward, we’ll explore common scenarios where you can derive state instead of storing it in another useState.

Note: All the code in this article is run in non-StrictMode.

How to Derive State From Props or Other State

In this section, we’ll first examine the problems caused by using useState for derivable values. We’ll look at a form component that stores unnecessary states like full name, adult status, and a local copy of an email. You’ll see the re-renders in different scenarios and then learn how to refactor using derived state to remove these problems.

The Problem With Extra States

Any value that comes directly from props or other state can be derived on the fly. Take the below as an example, where you pass an email prop to a form component:

"olaleyedev@gmail.com" />

Here is how the form receives the email prop and also manages its own state:

import { useEffect, useState, type FormEventHandler } from "react";

interface DetailFormProps {
  email: string;
}

const DetailForm = ({ email }: DetailFormProps) => {
  const [lastName, setLastName] = useState("");
  const [fullName, setFullName] = useState("");
  const [firstName, setFirstName] = useState("");
  const [age, setAge] = useState(0);
  const [isAdult, setIsAdult] = useState(false);
  const [localEmail, setLocalEmail] = useState(email);

  useEffect(() => {
    setLocalEmail(email);
  }, [email]);

  useEffect(() => {
    setFullName(`${firstName} ${lastName}`.trim());
  }, [firstName, lastName]);

  useEffect(() => {
    setIsAdult(age > 18);
  }, [age]);

  const submitForm: FormEventHandler = (e) => {
    e.preventDefault();
    console.log({ fullName, age, isAdult });
  };

  console.count("-- Form render --");

  return (
    
      "1rem" }}>
        "firstName"
          style={{
            display: "inline-block",
            marginRight: "1rem",
            width: "10rem",
          }}
        >
          First Name
        
        "firstName"
          type="text"
          onChange={(e) => setFirstName(e.target.value)}
        />
      
      "1rem" }}>
        "lastName"
          style={{
            display: "inline-block",
            marginRight: "1rem",
            width: "10rem",
          }}
        >
          Last Name
        
        "lastName"
          type="text"
          onChange={(e) => setLastName(e.target.value)}
        />
      
      "1rem" }}>
        "age"
          style={{
            display: "inline-block",
            marginRight: "1rem",
            width: "10rem",
          }}
        >
          Age
        
        type="number" onChange={(e) => setAge(Number(e.target.value))} />
      
      
        Your receipt will have{" "}
        "1px solid #fffa",
            paddingBottom: "1px",
          }}
        >
          {fullName.trim() || "-----"}
        {" "}
        as the recipient's name and will be sent to {localEmail || "-----"}.
      
      
        {isAdult
          ? "You are allowed to order a drink."
          : "You are not allowed to order any drinks."}
      
      
    
  );
};

export default DetailForm;

The form component collects information from a user. It shows them more information based on their input and the provided email. It maintains some states to keep track of the user’s input.

While it looks simple, there are some issues with the way state is being used here.

First of all, a React component re-renders whenever any of its states change. Looking at the UI, the form should only re-render when users input their first name, last name, and age, or when the email prop changes from the parent. This means the form should keep track of just these three states internally, while deriving from the prop and other states.

But the form keeps track of three extra states (fullName, isAdult, and localEmail). This means that the form will re-render each time these extra states change.

Let’s see this in action:

As you can see, the form re-rendered twice when the input field changed, instead of once. The form re-rendered the first time the user updated their first name. But for each time the first and last name changed, the second useEffect gets triggered.

useEffect(() => {
  setFullName(`${firstName} ${lastName}`.trim());
}, [firstName, lastName]);

This is to sync the fullName with the firstName and lastName. Updating the fullName causes the form to re-render the second time.

The same applies to the isAdult state. When the user updates their age, setAge() re-renders the form, and the third useEffect also causes another re-render.

Handling Email Changes

Let’s see what happens when you update the email from the parent component. This is the code that allows you to update the email:

function App() {
  const [email, setEmail] = useState("olaleyedev@gmail.com");

  return (
    <>
      "1rem",
          border: "1px solid #fff",
          paddingBottom: "1rem",
        }}
      >
        Parent Component
        "0.4rem 0.8rem" }}
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      
      
    
  );
}

The parent component keeps track of the user’s email and also updates it through an input element.

Note: In the component, I’ve removed the useEffects that sync the fullName and isAdult. This is to focus mainly on the email prop. The form component now has this:

import { useEffect, useState, type FormEventHandler } from "react";

interface DetailFormProps {
  email: string;
}

const DetailForm = ({ email }: DetailFormProps) => {
  const [lastName, setLastName] = useState("");
  const [fullName, setFullName] = useState("");
  const [firstName, setFirstName] = useState("");
  const [age, setAge] = useState(0);
  const [isAdult, setIsAdult] = useState(false);
  const [localEmail, setLocalEmail] = useState(email);

  useEffect(() => {
    setLocalEmail(email);
  }, [email]);

  const submitForm: FormEventHandler = (e) => {
    e.preventDefault();
    console.log({ fullName, age, isAdult });
  };

  console.count("-- Form render --");

  return {/* Rest */};
};

export default DetailForm;

Updating the email from the parent component causes the detail form to have an extra re-render. Because you are saving the email to a local state, any change to the email prop triggers the useEffect to update the state, causing an extra re-render. Your UI will show stale data without useEffect.

How to Solve This with Derived States

You can solve all these extra re-renders by using derived states. Neither fullName nor isAdult directly needs the user’s input for us to know their value. You can calculate their value when their dependent states change without using useEffect. Likewise, you can derive the email directly by using the prop value on the fly.

import { useEffect, useState, type FormEventHandler } from "react";

interface DetailFormProps {
  email: string;
}

const DetailForm = ({ email }: DetailFormProps) => {
  const [lastName, setLastName] = useState("");
  const [firstName, setFirstName] = useState("");
- const [fullName, setFullName] = useState("");
  const [age, setAge] = useState(0);
- const [isAdult, setIsAdult] = useState(false);
- const [localEmail, setLocalEmail] = useState(email);

- useEffect(() => {
-   setFullName(`${firstName} ${lastName}`.trim());
- }, [firstName, lastName]);

- useEffect(() => {
-   setIsAdult(age > 18);
- }, [age]);

- useEffect(() => {
-   setLocalEmail(email);
- }, [email]);

+ const fullName = `${firstName} ${lastName}`.trim();
+ const isAdult = age > 18;

  const submitForm: FormEventHandler = (e) => {
    e.preventDefault();
-   console.log({ fullName, age, isAdult, email: localEmail });
+   console.log({ fullName, age, isAdult, email });
  };
};

export default DetailForm;

The form now stores the necessary state, lastName, firstName, and age. The fullName and isAdult values are derived directly from their dependent values.

As you can see with the derived state, we have 0 extra re-renders. The form re-rendered only when it should. The form re-rendered once when each input value changed, not twice. Also, when the email changes in the parent component, there is only one re-render.

How to Derive State From a URL

You can also use a URL to save dynamic data through route parameters or query strings. Every routing library provides some hooks to access this data.

For example, React Router provides useParams or useSearchParams. In most cases, the returned values from these hooks don’t need to go into useState again – as this would mean keeping track of two storage, useState and URL.

Now, we’ll look at some examples using search parameters from React Router. You’ll first see an example that overuses useState and causes extra re-renders and sync issues. Then you’ll see its derived solution.

Syncing with `useEffect`

The component you will be using is a filter component:

import { useEffect, useState } from "react";
import { useSearchParams } from "react-router";

const Products = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("");
  const [selectedMaterial, setSelectedMaterial] = useState("");

  useEffect(() => {
    setSearchQuery(searchParams.get("search") || "");
    setSelectedCategory(searchParams.get("category") || "");
    setSelectedMaterial(searchParams.get("material") || "");
  }, [searchParams]);

  console.count("__ RENDERDED ___");

  return (
    "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: "1rem",
      }}
    >
      
      
      
      
    
  );
};

export default Products;

This component allows users to search for a product and/or filter by category and materials. While it looks simple, this component has all the problems mentioned earlier.

Let’s see what happens when the component mounts with no filter and predefined filters.

With no filter:

The component only renders once when there's no filter. This is good.

With a predefined filter:

It renders twice because you are trying to make sure your useStates are in sync with the URL by using useEffect. The component renders the first time it mounts, then re-renders because of the dependency in useEffect.

Initializing `useState` Directly

You could be thinking that it’s better to move the getters into the useStates directly, which truly solves the re-rendering case when the component mounts.

const Products = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const [searchQuery, setSearchQuery] = useState(
    searchParams.get("search") || "",
  );
  const [selectedCategory, setSelectedCategory] = useState(
    searchParams.get("category") || "",
  );
  const [selectedMaterial, setSelectedMaterial] = useState(
    searchParams.get("material") || "",
  );

  // prev code
};

As you can see, the component only renders once. There is no more useEffect to trigger another re-render.

Just keep in mind that this isn’t a solution yet. It has other problems you’ll see soon.

What happens when any of the filtering changes or when you enter a search query?

Handling Changes

Both solution shows that you have unnecessary re-renders. This is because you have to keep two states in sync: both the useStates and the URL.

import { useEffect, useState } from "react";
import { useSearchParams } from "react-router";

const Products = () => {
  // prev code

  const handleSearchChange = (query: string) => {
    setSearchQuery(query);
    setSearchParams((prev) => {
      const newParams = new URLSearchParams(prev);
      if (query) {
        newParams.set("search", query);
      } else {
        newParams.delete("search");
      }
      return newParams;
    });
  };

  const handleCategoryChange = (category: string) => {
    setSelectedCategory(category);
    setSearchParams((prev) => {
      const newParams = new URLSearchParams(prev);
      if (category) {
        newParams.set("category", category);
      } else {
        newParams.delete("category");
      }
      return newParams;
    });
  };

  const handleMaterialChange = (material: string) => {
    setSelectedMaterial(material);
    setSearchParams((prev) => {
      const newParams = new URLSearchParams(prev);
      if (material) {
        newParams.set("material", material);
      } else {
        newParams.delete("material");
      }
      return newParams;
    });
  };

  const clearFilters = () => {
    setSearchQuery("");
    setSelectedCategory("");
    setSelectedMaterial("");
    setSearchParams({});
  };

  console.count("__ RENDERDED ___");

  return (
    "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: "1rem",
      }}
    >
      (e) => handleSearchChange(e.target.value)}
      />
      
      
      
    
  );
};

export default Products;

Because you are tracking the values in useState, you need to update the useState first before updating the URL. The UI won’t get updated if you update the URL without updating the useState.

Notice that each change leads to 2-3 re-renders.

Using Derived State

Using a derived state will solve all the issues you encountered. Your state can be derived directly from the URL without using useState and/or useEffect.

import { useSearchParams } from "react-router";

const Products = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const searchQuery = searchParams.get("search") || "";
  const selectedCategory = searchParams.get("category") || "";
  const selectedMaterial = searchParams.get("material") || "";

  const updateFilter = (key: string, value: string) => {
    setSearchParams((prev) => {
      const newParams = new URLSearchParams(prev);
      if (value) {
        newParams.set(key, value);
      } else {
        newParams.delete(key);
      }
      return newParams;
    });
  };

  const clearFilters = () => {
    setSearchParams({});
  };

  console.count("__ RENDERDED ___");

  return (
    "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: "1rem",
      }}
    >
      (e) => updateFilter("search", e.target.value)}
      />
      
      
      
    
  );
};

export default Products;

You now read your values directly from the URL. You also update the URL only whenever any of the values change.

Notice that you have no re-render when the component mounts, even with predefined filters. The component re-renders once when any filtering key changes.

This approach gives several benefits:

You don’t need useEffect to keep data in sync.
You only need to maintain a single source of truth, which is the URL.
You have less code, which is easier to maintain.

How to Derive State From External Data

Data fetching libraries like React Query provide states that can be used as a single source of truth. Saving this data in useState can sometimes be redundant.

Look at this example using React Query. First, create a parent component that will render the user details:

import { useSearchParams } from "react-router";
import UserDetail from "./user-detail";

const UserIdInput = () => {
  const [search, updateSearch] = useSearchParams();

  return (
    "id") || ""}
      onChange={(e) => updateSearch({ id: e.target.value })}
    />
  );
};

const User = () => {
  return (
    <>
      
      
    
  );
};

export default User;

You use the to update the user details you need to get. Now create the component:

import { useQuery } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import { useSearchParams } from "react-router";

interface IUser {
  id: number;
  name: string;
}

const getUser = async (id: string) => {
  const req = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  await new Promise((r) => setTimeout(r, 2_000));
  return req.json();
};

const UserDetail = () => {
  const [search] = useSearchParams();
  const userId = search.get("id") || "";

  const {
    data,
    isFetching,
    error: fError,
  } = useQuery({
    queryKey: ["user", userId],
    queryFn: () => getUser(userId),
    enabled: Boolean(userId),
    refetchOnWindowFocus: false,
  });

  const [user, setUser] = useState();
  const [error, setError] = useState<string>();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setUser(undefined);
    setError(undefined);
  }, [userId]);

  useEffect(() => {
    setError(fError?.message);
    setLoading(isFetching);
    setUser(data);
  }, [data, fError, isFetching]);

  console.count("__ RENDERED __");

  console.log({ data, user, isFetching, loading, error });

  if (error) return Try again later!;
  if (loading) return Loading...;

  if (user) {
    return (
      
        "2rem" }}>
          {user.id}: {user.name}
        
      
    );
  }

  return null;
};

export default UserDetail;

The component renders the details of a user. It gets the user’s ID from the URL.

The component uses the getUser function to get dummy data from an API. It simulates a little network delay by waiting for an extra two seconds with this line of code:

await new Promise((r) => setTimeout(r, 2_000));

The component uses useQuery to fetch the data. Internally, part of the state React Query keeps track of is the data, isFetching, and error. But the component creates another local state to keep track of these React Query states.

Notice that the component renders a total of four times. The component re-renders when React Query and local states change. Also, notice that both states are out of sync at some point. For example, in the third log, the data key from React Query already had the user details, while the local user state is still undefined. You had to use useEffect to update its state.

It’s more interesting when the component tries to get another user’s details.

The component reacts to when the user’s ID changes, when React Query state changes, and when local state changes. Similar to the mount problem, the component re-renders more than it needs to: it re-renders six times. Also, the local state was out of sync at some point because we had to rely on useEffect.

Derive Directly From React Query

You can correct all these issues by using a derived state like this:

import { useQuery } from "@tanstack/react-query";
import { useSearchParams } from "react-router";

interface IUser {
  id: number;
  name: string;
}

const getUser = async (id: string) => {
  const req = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  await new Promise((r) => setTimeout(r, 2_000));
  return req.json();
};

const UserDetail = () => {
  const [search] = useSearchParams();
  const userId = search.get("id") || "";

  const {
    data: user,
    isFetching: loading,
    error,
  } = useQuery({
    queryKey: ["user", userId],
    queryFn: () => getUser(userId),
    enabled: Boolean(userId),
  });

  console.count("__ RENDERED __");

  if (error) return Try again later!;
  if (loading) return Loading...;

  if (user) {
    return (
      
        "2rem" }}>
          {user.id}: {user.name}
        
      
    );
  }

  return null;
};

export default UserDetail;

React Query is now the single source of truth. There is no more manual synchronisation or extra useStates.

Also, the first thing you will notice is that you have fewer lines of code. This makes it easier to maintain. Check the GIF below to see how often the component renders when it mounts.

As you can see, the component re-renders only twice. Once, when the component initially mounts, and again when React Query state changes.

The same thing happened when you got another user's details. You have fewer re-renders: three times as opposed to six times when we kept track of the state locally.

How to Prevent Recalculation of a Derived State

Most calculations are fast enough to run on every render. This becomes a problem when it’s an expensive calculation. In such a case, you an use useMemo and/or memo to avoid unnecessary work.

const Detail = () => {
  const product = useQuery(...);
  const users = useQuery(...);

  const result = useMemo(() => {
    const expensiveResult = ...;

    return expensiveResult;
  }, [product.data]);

  return (
    <>
      {/* some other components */}
      
    
  );
};

const Result = memo(({ result }: { result: number }) => {
  return <>;
});

With useMemo, the result variable will be recalculated only when product.data changes. This means that the component remains the same until product.data changes.

You can read more here about how to use useMemo in React.

When to Use `useState`

While the article has focused on using derived states, there are cases where you must use useState.

Controlled Input

You need useState to manage the input’s value and keep it in sync with the component’s state when building a controlled input.

import { useState, type FormEventHandler } from "react";

const ControlledInput = () => {
  const [username, setUsername] = useState("");

  const handleSubmit: FormEventHandler = (e) => {
    e.preventDefault();
    console.log("Submitted value:", username);
  };

  return (
    "flex", flexDirection: "column", gap: "1rem" }}
    >
      
        "username">Username:
        "username"
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          style={{
            marginLeft: "1rem",
            padding: "0.5rem 0.4rem",
            border: `1px solid ${username.length < 2 ? "red" : "green"}`,
          }}
        />
      
      
    
  );
};

useState is needed here because:

you want to track the user’s value as they type
the value comes directly from the user interaction

Because we are tracking the input value with useState, we can easily validate the username and change the border’s color. freeCodeCamp has an article that explains what controlled inputs are.

Independent State Changes

You should use useState when a value can change without depending on other state or props. For example, when toggling a modal, you need useState to keep track of its state.

import { useState } from "react";

const Modal = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    
      
      {isModalOpen && (
        
          Modal Content
          
        
      )}
    
  );
};

Conclusion

Managing state is one of the trickiest parts of React. You shouldn’t store what you can calculate, and you should only store what you can’t derive.

By keeping states minimal and deriving when possible, it will be easier to debug and maintain your components.

How to Build a Reusable useSearch Hook in React

Spruce Emmanuel — Tue, 25 Feb 2025 21:15:43 +0000

Recently, I needed to add a search feature to a React app. Naturally, I did what many developers would do—I turned to Google for help.

The first article I found was about building a search and filter component in React. As I read through it, I couldn't help but think, This is okay, but it misses so many important cases. Then it hit me—I was the one who wrote that article a few years ago.

Turns out, my past self had some learning to do.

Since then, I've tackled more complex projects and realized that search in React can be so much more powerful, flexible, and efficient. That's why I've developed a reusable useSearch hook that handles everything from large datasets to typo-tolerant searches—and I'm excited to share it with you.

In this article, I'll walk you through building it step by step. By the end, you'll have a high-performance search system that you can drop into any React project, no matter how complex your data gets.

Outline

Introduction
The Problem With Simple Search Implementations
How to Build a Reusable useSearch Hook
How to Create the Filters
How to Handle Typos in Search
How to Use the Ready-Made useSearch Hook
Conclusion

Who Should Read This?

If you’re a React developer, whether you're just getting started or have plenty of experience, you’ve probably run into the limits of basic search features. Maybe your search is sluggish with large datasets, struggles with typos, or isn’t flexible enough to handle different data structures. If that sounds familiar, this guide is for you. We’ll build a high-performance, reusable search system that actually works in real-world apps.

What You’ll Learn

By the end of this guide, you’ll know how to:

Spot the common pitfalls of simple search implementations.
Build a powerful useSearch hook that works with different data types and nested objects.
Optimize performance with techniques like debouncing and memoization.
Improve the user experience with fuzzy search that handles typos.
Implement pagination to efficiently manage large result sets.

Prerequisites

Before diving in, you should be comfortable with:

React and JavaScript fundamentals.
Basic React hooks such as useState and useEffect.
Working with arrays and objects in JavaScript.

The Problem With Simple Search Implementations

Let’s start with a basic search component:

function SimpleSearch() {
    const data = [
        { name: "JavaScript" },
        { name: "Python" },
        { name: "Java" }
    ];

    const [query, setQuery] = useState("");

    const results = data.filter((item) => item.name.includes(query));

    return (
        <div>
            <input
                type="text"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Search..."
            />
            <ul>
                {results.map((item, index) => (
                    <li key={index}>{item.name}li>
                ))}
            ul>
        div>
    );
}

At first glance, this works fine: you type a query and get matching results. But in real-world applications, search needs to handle much more than just simple string comparisons. Here are some major limitations:

Limited data support: This approach only works with plain strings, making it impractical for complex data structures.
No support for nested objects: If your data has deeper structures (for example, { user: { name: "JavaScript" } }), this won’t work.
No typo tolerance: A slight misspelling like "javascrpt" won’t match "JavaScript", which can frustrate users.
Performance bottlenecks: Every keystroke triggers a full re-render, which can cause lag, especially with large datasets.

Clearly, we need something more powerful. Let’s build a better search system that’s flexible, optimized, and user-friendly.

How to Build a Reusable `useSearch` Hook

To overcome these issues, we’ll build a reusable useSearch hook that:

Supports multiple data types (strings, numbers, dates, nested objects).
Improves performance using debouncing and memoization.
Handles typos with fuzzy search.

How to Create the Hook

Let’s start by creating the hook. It takes in data, the search query, and a list of filter functions to apply:

// hooks/useSearch.js

function useSearch(data, query, ...filters) {
    const debouncedQuery = useDebounce(query, 300);

    return React.useMemo(() => {
        const dataArray = Array.isArray(data) ? data : [data];

        try {
            // Apply each filter function in sequence
            return filters.reduce(
                (acc, feature) => feature(acc, debouncedQuery),
                dataArray
            );
        } catch (error) {
            console.error("Error applying search features:", error);
            return dataArray;
        }
    }, [data, debouncedQuery, filters]);
}

How to Handle the Query with `useDebounce`

Without debouncing, every single keystroke triggers a new search. Imagine typing "apple"—each letter (a, p, p, l, e) fires a search request, causing multiple re-renders and potential performance issues.

To fix this, we used a debounce mechanism in the useSearch hook that waits until the user stops typing before running the search. Here’s what the useDebounce hook looks like:

import React from "react";

function useDebounce(value, delay) {
    const [debouncedValue, setDebouncedValue] = React.useState(value);

    React.useEffect(() => {
        const timeoutId = setTimeout(() => {
            setDebouncedValue(value);
        }, delay);

        return () => clearTimeout(timeoutId);
    }, [value, delay]);

    return debouncedValue;
}

This hook ensures that the search only triggers after 300ms of inactivity, preventing unnecessary re-renders and improving responsiveness.

Want to see the difference in action? Compare a debounced search to one that updates on every keystroke in the demo below:

How to Optimize Performance with `React.useMemo`

Filtering large datasets can be expensive, and if our search logic runs every time a component re-renders—even when the search query hasn’t changed—it can slow things down. That’s where React.useMemo() comes in.

By wrapping our search logic in useMemo, we ensure it only recalculates when the search query, filters, or data actually change:

return React.useMemo(() => {
    // Filtering logic
}, [data, debouncedQuery, filters]);

But how much of a difference does this make? Imagine a parent component with an unrelated state (like a counter). Every time the parent re-renders, a non-memoized search would still run, even if the query remains the same.

The live demo below compares two search implementations, one without useMemo and one with it. Try changing an unrelated state in the parent and see how many times each search runs:

With useMemo, the search logic only runs when the query, filters, or data change, keeping performance smooth and avoiding unnecessary computations.

How to Chain Filters with `.reduce()`

The hook uses .reduce() to sequentially apply each filter function to the data, keeping the logic clean and modular:

return filters.reduce(
    (acc, feature) => feature(acc, debouncedQuery),
    dataArray
);

This approach makes it easy to add or remove filters as needed.

How to Create the Filters

Filters add the magic to our search hook by processing the data based on the search query. For this project, I created two filters: one for searching and one for pagination.

The search filter checks specified fields in an object for matches with the query. It supports several matching strategies (exact, startsWith, endsWith, contains):

// utils/search.js

export function search(options) {
    const { fields, matchType } = options;

    return (data, query) => {
        const trimmedQuery = String(query).trim().toLowerCase();

        if (!trimmedQuery) return data;

        return data.filter((item) => {
            const fieldsArray = fields
                ? Array.isArray(fields)
                    ? fields
                    : [fields]
                : getAllKeys(item);

            return fieldsArray.some((field) => {
                const fieldValue = getFieldValue(item, field);
                if (fieldValue == null) return false;

                const stringValue = convertToString(fieldValue).toLowerCase();

                switch (matchType) {
                    case "exact":
                        return stringValue === trimmedQuery;
                    case "startsWith":
                        return stringValue.startsWith(trimmedQuery);
                    case "endsWith":
                        return stringValue.endsWith(trimmedQuery);
                    case "contains":
                        return stringValue.includes(trimmedQuery);
                    default:
                        throw new Error(`Unsupported match type: ${matchType}`);
                }
            });
        });
    };
}

Let’s go through it to see how it works:

Cleaning up the query:

 const trimmedQuery = String(query).trim().toLowerCase();

 if (!trimmedQuery) {
     return data;
 }

This makes the search case-insensitive and removes extra spaces.

Determining fields to search:

 const fieldsArray = fields
     ? Array.isArray(fields)
         ? fields
         : [fields]
     : getAllKeys(item);

If specific fields aren’t provided, it extracts all keys, including nested ones.

Filtering the data:

 return fieldsArray.some((field) => {
     const fieldValue = getFieldValue(item, field);

     if (fieldValue == null) {
         return false;
     }

     const stringValue = convertToString(fieldValue).toLowerCase();

     // Matching logic based on matchType follows...
 });

2. The Helper Functions

To keep our filtering logic clean and focused, we use a few helper functions. These functions handle common tasks like retrieving keys from an object, getting nested field values, and converting values to strings. This way, our search filter can work with a variety of data structures and types without cluttering the main logic.

Extracting all keys with getAllKeys:

The getAllKeys function scans an object to gather all its keys—even those nested within arrays or sub-objects. If you don't provide specific fields for searching, this function ensures that every potential field is considered.

  // utils/getAllKeys.js

  export function getAllKeys(item, prefix = "") {
      if (!item || typeof item !== "object") {
          return [];
      }

      const fields = [];

      for (const key of Object.keys(item)) {
          const value = item[key];
          const fieldPath = prefix ? `${prefix}.${key}` : key;

          if (Array.isArray(value)) {
              value.forEach((arrayItem, index) => {
                  if (
                      arrayItem &&
                      typeof arrayItem === "object" &&
                      !(arrayItem instanceof Date)
                  ) {
                      fields.push(...getAllKeys(arrayItem, `${fieldPath}[${index}]`));
                  } else {
                      fields.push(`${fieldPath}[${index}]`);
                  }
              });
          } else if (value instanceof Date) {
              fields.push(fieldPath);
          } else if (value && typeof value === "object") {
              fields.push(...getAllKeys(value, fieldPath));
          } else {
              fields.push(fieldPath);
          }
      }

      return fields;
  }

Retrieving field values with getFieldValue:

The getFieldValue function extracts the value of a given field from an object using a path string (like "user.name" or "items[0].title"). It splits the path into individual keys and then traverses the object step by step to find the correct value.

  // utils/getFieldValue.js

  export function getFieldValue(item, field) {
      const keys = field.split(/[\.\[\]]/).filter(Boolean);
      let value = item;

      for (const key of keys) {
          if (value == null) {
              return null;
          }
          value = value[key];
      }

      return value;
  }

Converting values to strings with convertToString:

For our search comparisons, we need to ensure all data is in string format. The convertToString function handles this conversion. It turns dates into ISO strings and booleans into "true" or "false", ensuring a uniform format for our search filter.

  // utils/convertToString.js

  export function convertToString(value) {
      if (value instanceof Date) {
          return value.toISOString();
      }

      if (typeof value === "boolean") {
          return value ? "true" : "false";
      }

      return String(value);
  }

3. The Pagination Filter

For large datasets, displaying all results at once isn't practical. The pagination filter helps by returning only a subset of the data based on the current page and the number of items per page. This not only improves performance but also makes the data more manageable for users.

In this function, we calculate the starting index by using the current page number and page size. Then, we use the JavaScript slice method to pick out only the items that belong to that specific page. Although the query parameter is present, it isn’t used here—it’s just for keeping the hook's interface consistent.

// utils/paginate.js

export function paginate(options) {
    const { page = 1, pageSize = 10 } = options;

    return (data, query) => {
        // Query is not used here; it’s only for compatibility with our hook.
        const startIndex = (page - 1) * pageSize;

        return data.slice(startIndex, startIndex + pageSize);
    };
}

In this code, the pagination filter efficiently slices the data array, so you only get the subset of results that you want to display on the current page.

How to Use the Hook with Search and Pagination Filters

Now that we have both the search and pagination filters set up, let’s see how to use them in a React component.

First, import the custom useSearch hook and the filter functions:

import useSearch from "./hooks/useSearch.js";
import search from "./utils/search.js";
import paginate from "./utils/paginate.js";

Next, create a component that uses these filters. In this example, we have an array of items, and we want to search by name and display a fixed number of results per page. We also reset to the first page whenever a new search query is entered.

function SearchComponent() {
    // Example data array
    const data = [
        { name: "JavaScript" },
        { name: "Python" },
        { name: "Java" },
        { name: "Ruby" },
        // Imagine more data here
    ];

    const [query, setQuery] = React.useState("");
    const [page, setPage] = React.useState(1);
    const pageSize = 3; // Items per page

    // Apply both search and pagination filters with our custom hook.
    const results = useSearch(
        data,
        query,
        search({
            fields: ["name"],
            matchType: "contains", // Options: "exact", "startsWith", etc.
        }),
        paginate({ page, pageSize })
    );

    // Compute total pages based on filtered results (without pagination)
    const filteredData = search({ fields: ["name"], matchType: "contains" })(
        data,
        query
    );

    const totalPages = Math.ceil(filteredData.length / pageSize);

    return (
        <div style={{ padding: "20px", fontFamily: "Arial, sans-serif" }}>
            <h2>Search and Paginationh2>
            <input
                type="text"
                value={query}
                onChange={(e) => {
                    setQuery(e.target.value);
                    setPage(1); // Reset to first page on new search
                }}
                placeholder="Search by name..."
                style={{ padding: "8px", width: "300px", marginBottom: "10px" }}
            />
            <ul>
                {results.map((item, index) => (
                    <li key={index}>{item.name}li>
                ))}
            ul>
            <div style={{ marginTop: "10px" }}>
                <button
                    onClick={() => setPage((prev) => Math.max(prev - 1, 1))}
                    disabled={page === 1}
                    style={{ padding: "6px 12px", marginRight: "10px" }}
                >
                    Previous
                button>
                <span>Page {page} of {totalPages}span>
                <button
                    onClick={() => setPage((prev) => Math.min(prev + 1, totalPages))}
                    disabled={page >= totalPages}
                    style={{ padding: "6px 12px", marginLeft: "10px" }}
                >
                    Next
                button>
            div>
        div>
    );
}

To see this in action and try it for yourself, check out the live demo below:

How to Handle Typos in Search

Search is one of the oldest features on the web, but that doesn’t mean users always get it right. In fact, typos are incredibly common. Imagine a user searching for "PlayStation," but they accidentally type "PlauStation" instead. They still expect to see relevant results, and our search system should be forgiving enough to handle these small mistakes.

To achieve this, we are going to use a fuzzy search technique that matches similar words even if they’re not spelled exactly the same. We’ll implement this using an n-gram similarity algorithm, which breaks words into smaller segments (n-grams) and compares them to find matches.

Step 1: Building the n-gram Similarity Algorithm

The n-gram similarity algorithm works by splitting both the search query and dataset values into small overlapping character sequences (n-grams) and comparing them:

// utils/nGramFuzzySearch.js

export const nGramFuzzySearch = (value, query) => {
    const n = 2; // Default to bigrams (two-character sequences)

    const valueGrams = generateNGrams(value.toLowerCase(), n);
    const queryGrams = generateNGrams(query.toLowerCase(), n);

    const intersection = valueGrams.filter((gram) => queryGrams.includes(gram));

    return intersection.length / Math.max(valueGrams.length, queryGrams.length);
};

const generateNGrams = (str, n) => {
    const grams = [];

    for (let i = 0; i <= str.length - n; i++) {
        grams.push(str.slice(i, i + n));
    }

    return grams;
};

Here is how this will work if you try searching for query PlauStation and the product name is PlayStation:

First, the algorithm will generate bigrams (two-letter sequences) for both words:

PlayStation → ["pl", "la", "ay", "ys", "st", "ta", "at", "ti", "io", "on"]
PlauStation → ["pl", "la", "au", "us", "st", "ta", "at", "ti", "io", "on"]

Then, it calculates the similarity based on the number of overlapping bigrams. The higher the overlap, the closer the match. Since most bigrams match, the algorithm calculates a high similarity score, allowing it to recognize "PlauStation" as a likely match for "PlayStation", even with minor typos.

Now, update your search filter to support a new matchType for fuzzy search:

// Update in utils/search.js

import { nGramFuzzySearch } from "./nGramFuzzySearch";

export function search(options) {
    const { fields, matchType } = options;

    return (data, query) => {
        const trimmedQuery = String(query).trim().toLowerCase();

        if (trimmedQuery === "") {
            return data;
        }

        return data.filter((item) => {
            const fieldsArray = fields
                ? Array.isArray(fields)
                    ? fields
                    : [fields]
                : getAllKeys(item);

            return fieldsArray.some((field) => {
                const fieldValue = getFieldValue(item, field);
                if (fieldValue == null) {
                    return false;
                }

                const stringValue = convertToString(fieldValue).toLowerCase();

                switch (matchType) {
                    case "exact":
                        return stringValue === trimmedQuery;
                    case "startsWith":
                        return stringValue.startsWith(trimmedQuery);
                    case "endsWith":
                        return stringValue.endsWith(trimmedQuery);
                    case "contains":
                        return stringValue.includes(trimmedQuery);
                    case "fuzzySearch": {
                        const threshold = 0.5; // Minimum similarity score required
                        const score = nGramFuzzySearch(stringValue, trimmedQuery);
                        return score >= threshold;
                    }
                    default:
                        throw new Error(`Unsupported match type: ${matchType}`);
                }
            });
        });
    };
}

Step 3: Using Fuzzy Search in the `useSearch` Hook

Now you can enable fuzzy search simply by passing fuzzySearch as the matchType:

const results = useSearch(
    data,
    query,
    search({
        fields: ["name"],
        matchType: "fuzzySearch",
    })
);

Try it out on this Live Demo to see how even with a typo like "PlauStation", your app still finds "PlayStation".

How to Use the Ready-Made `useSearch` Hook

If you’d rather not build everything from scratch, I've got you covered. I’ve published a fully typed, optimized version of the useSearch hook on npm, called use-search-react. This package not only handles search but also comes with built-in support for sorting, pagination, grouping, and multiple fuzzy search algorithms so you can focus on building your app instead of reinventing the wheel.

How to Use it in Your Component

Step 1: Install the hook

Simply install the package using npm:

npm install use-search-react

Step 2: Import and use the hook

Using the hook in your component is straightforward. For example, consider the following component that uses the hook to perform a fuzzy search on an array of data:

import { useSearch, search } from "use-search-react";
import { useState } from "react";

function SearchComponent() {
    const [query, setQuery] = useState("");

    const data = [
        { name: "JavaScript" },
        { name: "Python" },
        { name: "Java" }
    ];

    // The 'search' function here is configured to perform a fuzzy search.
    const results = useSearch(
        data,
        query,
        search({
            fields: ["name"],
            matchType: "fuzzy",
        })
    );

    return (
        <div>
            <input
                type="text"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Search..."
            />
            <ul>
                {results.map((item, index) => (
                    <li key={index}>{item.name}li>
                ))}
            ul>
        div>
    );
}

This example shows how easy it is to use the hook in your React component. The package is built to handle even very large datasets—tens of thousands of records—while keeping your application responsive and efficient.

Here is an example of it working with ten thousand records of data

For more detailed usage and additional configuration options (like pagination, sorting, or grouping), check out the full documentation on npm: use-search-react Docs.

Conclusion

Building a search system in React is more than just filtering data. It's about crafting an experience that feels intuitive and responsive for your users.

In this article, you learned how to build a custom useSearch hook that can address common challenges like performance issues, handling nested data, and even forgiving user typos with fuzzy search. We also looked at how to use pagination to manage large datasets.

Whether you decide to build your own from scratch or use the fully typed, ready-made version available on npm, you now have the search functionality that you can easily drop in any of your React projects.

Take these ideas, experiment with them, and adjust the implementation to fit your specific needs.

If you have any questions, feel free to find me on Twitter at @sprucekhalifa, and don’t forget to follow me for more tips and updates. Happy coding!

How to Build a Countdown Timer with React – A Step-by-Step Guide

Franklin Ohaegbulam — Mon, 14 Oct 2024 13:38:55 +0000

In this tutorial, you will learn how to build a custom countdown timer to track events using React.js.

A countdown timer is a simple way to measure the time until an event happens. It counts down that time in reverse – like 5, 4, 3, 2, 1. It helps you manage the time leading up to upcoming events, product launches, or offers, and allows you to inform users about that timeline.

1. Set Up Your React App
2. Create the Count Down Component
3. Implement Time State Management and Functionality
4. Create a Countdown Form
5. Handle the Countdown Start, Stop, and Reset Functionality
6. Format the Event Date and Time
7. Display the CountDown Timer
8. Styling the Countdown Timer Component
Conclusion

Prerequisites

You should have decent knowledge of HTML, CSS, and JavaScript to get the most out of this article.

Let's get started.

1. Set Up Your React App

First, you’ll need to create a React application if you don’t already have one ready to use. In this tutorial, I’m using Vite. Then change into the new project directory by running the following commands in your code editor:

npm create vite countdown-timer

cd countdown-timer

Run this command to start the app on the local server:

npm run dev

Now, you should see the project in your browser on https://localhost/3000.

2. Create the Count Down Component

In the src folder of your React app, create a components directory, and inside it, create a CountDown.jsx file.

/* components/CountDown.jsx */

import React from "react";

const CountdownTImer = () => {

  return (
    <div className="countdown-timer-container">
    div>
  );
};

export default CountdownTimer;

3. Implement Time State Management and Functionality

Define the state variables using the useState hook. Update the CountDown.jsx file with the following code:

/* components/CountDown.jsx */

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

const CountdownTimer = () => {
  const [eventName, setEventName] = useState("");
  const [eventDate, setEventDate] = useState("");
  const [countdownStarted, setCountdownStarted] = useState(false);
  const [timeRemaining, setTimeRemaining] = useState(0);

 return (
    <div className="countdown-timer-container">
    div>
  );
};

export default CountdownTimer;

Here's a brief breakdown of the useState:

eventName: stores the name of the event for the countdown timer.
eventDate: stores the date of the event for the countdown timer.
countdownStarted: tracks whether the countdown timer has started.
timeRemaining: stores the remaining time in milliseconds for the countdown.

Now, we’ll implement the functionality of the countdown timer using the useEffect hook:

/* components/CountDown.jsx */

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

const CountdownTimer = () => {

    // ...

  useEffect(() => {
    if (countdownStarted && eventDate) {
      const countdownInterval = setInterval(() => {
        const currentTime = new Date().getTime();
        const eventTime = new Date(eventDate).getTime();
        let remainingTime = eventTime - currentTime;

        if (remainingTime <= 0) {
          remainingTime = 0;
          clearInterval(countdownInterval);
          alert("Countdown complete!");
        }

        setTimeRemaining(remainingTime);
      }, 1000);

      return () => clearInterval(countdownInterval);
    }
  }, [countdownStarted, eventDate, timeRemaining]);

 return (
    <div className="countdown-timer-container">
    div>
  );
};

export default CountdownTimer;

The useEffect hook runs whenever countdownStarted or eventDate changes. It sets up an interval that updates timeRemaining every second based on the current time and event time. If the remaining time becomes less than or equal to 0, it stops the interval and triggers the notification "Countdown complete!"

/* components/CountDown.jsx */

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

const CountdownTimer = () => {

  // ...

  useEffect(() => {
    if (countdownStarted) {
      document.title = eventName;
    }
  }, [countdownStarted, eventName]);

 return (
    <div className="countdown-timer-container">
    div>
  );
};

export default CountdownTimer;

Here, the useEffect hook runs whenever countdownStarted or eventName changes. It updates the countdown timer title to display the eventName when the countdown timer is started.

4. Create a Countdown Form

To have control over the countdown timer, you’ll need to create a form with two inputs for the name and date of the event. Then, add the following code:

/* components/CountDown.jsx */

import React from "react";

 // ...

   const handleSetCountdown = () => {
    setCountdownStarted(true);
  };

 return (
 <div className="countdown-timer-container">
      <h2 className="countdown-name">
        {countdownStarted ? eventName : "Countdown Timer"}
      h2>

      {!countdownStarted ? (
        <form className="countdown-form">
          <label htmlFor="title">Event Namelabel>
          <input
            name="title"
            type="text"
            placeholder="Enter event name"
            value={eventName}
            onChange={(e) => setEventName(e.target.value)}
          />

          <label htmlFor="date-picker">Event Datelabel>
          <input
            name="date-picker"
            type="date"
            value={eventDate}
            onChange={(e) => setEventDate(e.target.value)}
            onClick={(e) => (e.target.type = "date")}
          />
          <button onClick={handleSetCountdown}>Start Countdownbutton>
        form>
      }
    div>
  );
};

export default CountdownTimer;

Here's a brief breakdown of the useState:

eventName: stores the name of the event for the countdown timer.
countdown-name: displays the "Countdown Timer" by default or updates to the eventName entered once the countdown has started.

The form includes:

The input field with the name title and label Event Name update the eventName state value.
The input field with the name date-picker allow users to select a date and control the eventDate state value.
The button Start Countdown triggers the handleSetCountdown function when clicked to initiate the countdown.

5. Handle the Countdown Start, Stop, and Reset Functionality

Next, update the handleSetCountdown function to store the event name and date in the local storage using localStorage.setItem. localStorage is a web API that enables users to store data as key-value pairs persistently, even when the browser is closed or refreshed.

The code is as follows:

/* components/CountDown.jsx */

import React from "react";

 // ...

    const handleSetCountdown = () => {
    setCountdownStarted(true);
    localStorage.setItem("eventDate", eventDate);
    localStorage.setItem("eventName", eventName);
  };

 return (
 <div className="countdown-timer-container">
       // ...
 div>
  );
};

export default CountdownTimer;

Now, create the handleStopCountdown and handleResetCountdown functions to stop the countdown timer by updating the countdownStarted state to false.

/* components/CountDown.jsx */

import React from "react";

 // ...

  const handleStopCountdown = () => {
    setCountdownStarted(false);
    setTimeRemaining(0);
  };

  const handleResetCountdown = () => {
    setCountdownStarted(false);
    setEventDate("");
    setEventName("");
    setTimeRemaining(0);
    localStorage.removeItem("eventDate");
    localStorage.removeItem("eventName");
  };

 return (
 <div className="countdown-timer-container">
       // ...
       <div className="control-buttons">
            <button onClick={handleStopCountdown}>Stopbutton>
            <button onClick={handleResetCountdown}>Resetbutton>
        div>
 div>
  );
};

export default CountdownTimer;

Here:

handleStopCountdown: resets the timeRemaining state to zero.
handleResetCountdown: resets the countdown timer to its initial state. It clears the remaining time states and removes the event date and event name from local storage using localStorage.removeItem().

6. Format the Event Date and Time

Let's convert date and time data into a readable format.

/* components/CountDown.jsx */

import React from "react";

 // ...

  const formatDate = (date) => {
    const options = { month: "long", day: "numeric", year: "numeric" };
    return new Date(date).toLocaleDateString("en-US", options);
  };

  const formatTime = (time) => {
    const seconds = Math.floor((time / 1000) % 60);
    const minutes = Math.floor((time / (1000 * 60)) % 60);
    const hours = Math.floor((time / (1000 * 60 * 60)) % 24);
    const days = Math.floor(time / (1000 * 60 * 60 * 24));

    return (
      <div className="countdown-display">
        <div className="countdown-value">
          {days.toString().padStart(2, "0")} <span>daysspan>
        div>
        <div className="countdown-value">
          {hours.toString().padStart(2, "0")} <span> hoursspan>
        div>
        <div className="countdown-value">
          {minutes.toString().padStart(2, "0")} <span>minutesspan>
        div>
        <div className="countdown-value">
          {seconds.toString().padStart(2, "0")} <span>secondsspan>
        div>
      div>
    );
  };

 return (
 <div className="countdown-timer-container">
       // ...
 div>
  );
};

export default CountdownTimer;

Here's a brief breakdown of the functions:

formatDate: formats the date input into a human-readable date string.
formatTime: takes a time in milliseconds as input and calculates the days, hours, minutes, and seconds of the timer. The .toString().padStart(2, "0") returns the formatted time as two characters by appending 0 at the beginning of the time only if the length of the number is less than 2.

Here are the complete contents of the CountDown.jsx file:

 /* components/CountDown.jsx */

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

const CountdownTimer = () => {
  const [eventName, setEventName] = useState("");
  const [eventDate, setEventDate] = useState("");
  const [countdownStarted, setCountdownStarted] = useState(false);
  const [timeRemaining, setTimeRemaining] = useState(0);

  useEffect(() => {
    if (countdownStarted && eventDate) {
      const countdownInterval = setInterval(() => {
        const currentTime = new Date().getTime();
        const eventTime = new Date(eventDate).getTime();
        let remainingTime = eventTime - currentTime;

        if (remainingTime <= 0) {
          remainingTime = 0;
          clearInterval(countdownInterval);
          alert("Countdown complete!");
        }

        setTimeRemaining(remainingTime);
      }, 1000);

      return () => clearInterval(countdownInterval);
    }
  }, [countdownStarted, eventDate, timeRemaining]);

  useEffect(() => {
    if (countdownStarted) {
      document.title = eventName;
    }
  }, [countdownStarted, eventName]);

  const handleSetCountdown = () => {
    setCountdownStarted(true);
    localStorage.setItem("eventDate", eventDate);
    localStorage.setItem("eventName", eventName);
  };

  const handleStopCountdown = () => {
    setCountdownStarted(false);
    setTimeRemaining(0);
  };

  const handleResetCountdown = () => {
    setCountdownStarted(false);
    setEventDate("");
    setEventName("");
    setTimeRemaining(0);
    localStorage.removeItem("eventDate");
    localStorage.removeItem("eventName");
  };

  const formatDate = (date) => {
    const options = { month: "long", day: "numeric", year: "numeric" };
    return new Date(date).toLocaleDateString("en-US", options);
  };

  const formatTime = (time) => {
    const seconds = Math.floor((time / 1000) % 60);
    const minutes = Math.floor((time / (1000 * 60)) % 60);
    const hours = Math.floor((time / (1000 * 60 * 60)) % 24);
    const days = Math.floor(time / (1000 * 60 * 60 * 24));

    return (
      <div className="countdown-display">
        <div className="countdown-value">
          {days.toString().padStart(2, "0")} <span>daysspan>
        div>
        <div className="countdown-value">
          {hours.toString().padStart(2, "0")} <span> hoursspan>
        div>
        <div className="countdown-value">
          {minutes.toString().padStart(2, "0")} <span>minutesspan>
        div>
        <div className="countdown-value">
          {seconds.toString().padStart(2, "0")} <span>secondsspan>
        div>
      div>
    );
  };

  return (
    <div className="countdown-timer-container">
      <h2 className="countdown-name">
        {countdownStarted ? eventName : "Countdown Timer"}
      h2>
      <p className="countdown-date">
        {countdownStarted && formatDate(eventDate)}
      p>

      {!countdownStarted ? (
        <form className="countdown-form">
          <label htmlFor="title">Event Namelabel>
          <input
            name="title"
            type="text"
            placeholder="Enter event name"
            value={eventName}
            onChange={(e) => setEventName(e.target.value)}
          />

          <label htmlFor="date-picker">Event Datelabel>
          <input
            name="date-picker"
            type="date"
            value={eventDate}
            onChange={(e) => setEventDate(e.target.value)}
            onClick={(e) => (e.target.type = "date")}
          />
          <button onClick={handleSetCountdown}>Start Countdownbutton>
        form>
      ) : (
        <>
          {formatTime(timeRemaining)}
          <div className="control-buttons">
            <button onClick={handleStopCountdown}>Stopbutton>
            <button onClick={handleResetCountdown}>Resetbutton>
          div>
        
      )}
    
  );
};

export default CountdownTimer;

7. Display the CountDown Timer

Import CountDownTimer in the App.jsx, replacing the default code with this:

 /* App.jsx */

import React from "react";
import CountdownTimer from "./components/CountDown";

function App() {
  return (
    <div className="App">
      <CountdownTimer />
    div>
  );
}

export default App;

And that's it! Your countdown timer app should be rendered on localhost:3000 in the browser.

8. Styling the Countdown Timer Component

Lastly, update the index.css file in the same directory of your project by adding the following styles:

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Open+Sans:wght@400;500;700&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: url("./img/bg-img.jpg") top center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 1rem;
}

.countdown-form {
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem;
  width: 100%;
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

input {
  background-color: #d1f1ee;
  border: 1px solid #dfdfdf;
  border-radius: 6px;
  outline: none;
  margin-bottom: 1rem;
  padding: 0.75rem;
  width: 100%;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

input:focus {
  border-color: #038a7f;
}

button {
  background-color: #038a7f;
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  outline: none;
  margin-top: 1rem;
  text-transform: uppercase;
  width: 100%;
  height: 2.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: #005a53;
}

.countdown-message {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  margin: 1rem 0;
}

.countdown-name {
  color: #fff;
  font-size: clamp(1.5rem, 5vw, 2rem);
  margin-bottom: 1rem;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.countdown-date {
  color: #eafbfa;
  margin: 0 0 1.5rem;
  text-align: center;
  font-size: clamp(1rem, 3vw, 1.25rem);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.countdown-display {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 1rem;
  justify-content: center;
  padding: 0.5rem;
  max-width: 600px;
  margin: 0 auto;
}

.countdown-value {
  background-color: #2f5d6f;
  border-radius: 50%;
  color: #03d5c0;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 700;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.countdown-value:hover {
  transform: scale(1.05);
}

.countdown-value > span {
  color: #fff;
  font-size: clamp(0.75rem, 2vw, 0.875rem);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 0.2rem;
  font-weight: 500;
}

.control-buttons {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.control-buttons > button {
  background-color: #03b4a2;
  border-radius: 50%;
  width: clamp(45px, 8vw, 50px);
  height: clamp(45px, 8vw, 50px);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.65rem, 2vw, 0.775rem);
}

.control-buttons button:hover {
  background-color: #0b7c71;
  transform: scale(1.1);
}

@media (max-width: 480px) {
  .countdown-display {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .countdown-value {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
  }

  .countdown-value > span {
    font-size: 0.75rem;
  }

  .control-buttons {
    margin-top: 1.5rem;
  }
}

@media (max-width: 360px) {
  body {
    padding: 0.75rem;
  }

  .countdown-form {
    padding: 1rem;
  }

  .countdown-name {
    font-size: 1.25rem;
  }

  .countdown-date {
    font-size: 1rem;
  }

  .control-buttons > button {
    width: 40px;
    height: 40px;
  }
}

Congratulations, you’ve finished building your Countdown timer app!

Conclusion

In this article, you've learned how to build a basic React countdown timer app and how to work with the browser's local storage.

The code implemented in this article is accessible in this GitHub repository. To learn more about web development and technology, check out my blog or connect with me on X(Twitter) and LinkedIn.

Thank you for reading.

Learn React Hooks – Common Hooks Explained with Code Examples

Prankur Pandey — Wed, 25 Sep 2024 16:04:35 +0000

Web development is a popular field in the tech industry. It involves building web software using HTML, CSS, and JavaScript – sometimes with the help of various frameworks and libraries.

Using libraries and frameworks allows developers to focus more on the development while the tools take care of certain functionality in the background. And React.js is a popular JavaScript library for building front-end applications.

In this article, you’ll learn about the backbone of React which is Hooks, and how they can make your life easier as a developer.

Prerequisites:

You should know the basics of JavaScript.
You should also know the basics of React, like setting up an app, updating it, and using state.

Getting Started

So you've decided to build a React app—congratulations! 🎉 But as you dive into the world of React hooks, you might find yourself feeling overwhelmed. With a plethora of hooks available, figuring out which ones to use and when can be a bit daunting.

Well, don’t worry – in this guide, I’ll break down every major hook so you can see how they fit together. We’ll also discuss which ones you'll use more frequently versus more rarely.

By the end of this article, you'll have a comprehensive map of React hooks and their practical applications.

What are Hooks?

In JavaScript, we use variables to store data and later perform operations on that data.

Hooks in React work similarly, but they are designed to manage state in functional components. Instead of manually declaring a single variable, hooks like useState give us a way to declare stateful values along with a setter function to update that state.

Here’s a simple example:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);  // Initialize state and state updater

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

In this code, I use the useState hook to declare a piece of state called count and set its initial value to 0. The setCount function allows us to update this state. Every time the button is clicked, we use setCount to increase count by 1. When the state updates, React re-renders the component to reflect the change.

Unlike declaring let count = 0, using useState lets React remember the state across renders and ensures that the UI updates correctly.

Types of React Hooks

To make things easier, you can think of React hooks as falling into eight major categories:

State Management Hooks – For handling state.
Effect Hooks – For side effects.
Ref Hooks – For referencing JavaScript values or DOM elements.
Performance Hooks – For optimizing performance.
Context Hooks – For accessing React context.
Transition Hooks – For smoother user experiences.
Some Random Hooks – Special-purpose hooks.
New Hooks (React 19) – Cutting-edge tools introduced in the latest React version.

In React, you can also build custom hooks for different use cases. Every hook starts with the use keyword – even custom hooks start with this structure. This keyword is reserved for Hooks in React.

Let’s explore these hooks in detail.

State Management Hooks

1. `useState`

The useState hook is the bread and butter of React. It’s the most commonly used hook, and it’s key for managing state in functional components. With useState, you can capture user inputs, show or hide components, and manage numbers, like in an ecommerce app with a shopping cart.

useState is versatile and straightforward: you initialize it with a value, and it returns a state variable and an updater function.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);  // Initialize state and state updater

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

Code explanation: useState initializes the state (count) and provides a function (setCount) to update that state.

2. `useReducer`

When useState isn’t enough, useReducer comes into play. This hook is perfect for managing complex state logic.

It uses a reducer function to simplify state updates and is especially useful when multiple state variables are interdependent or when actions need to be dispatched.

Think of it as an upgrade for managing more complicated state scenarios. Here’s an example:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}p>
      <button onClick={() => dispatch({ type: 'increment' })}>+button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-button>
    div>
  );
}

Code explanation: useReducer is useful for managing complex state updates, like handling multiple related actions.

3. useSyncExternalStore
useSyncExternalStore is a hook for integrating non-React state stores into your React components.

While not commonly used, it’s crucial if you’re building your own state management library from scratch.

import React, { useSyncExternalStore } from 'react';

const externalStore = {
  subscribe: (callback) => {
    const interval = setInterval(callback, 1000);
    return () => clearInterval(interval);
  },
  getSnapshot: () => new Date().toLocaleTimeString(),
};

function Clock() {
  const time = useSyncExternalStore(externalStore.subscribe, externalStore.getSnapshot);
  return <div>{time}div>;
}

Code explanation: useSyncExternalStore lets you connect your React component to non-React data sources, like global stores.

Effect Hooks

1. useEffect
The useEffect hook performs side effects on your components. Whether you’re interacting with the DOM or fetching data, useEffect is your go-to. It runs after each render by default, but you can customize its behavior using a dependency array.

But you should consider using more specialized tools or libraries like React Query for event-based or render-based side effects.

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);  // Empty dependency array means it runs once on mount

  return <div>{data ? JSON.stringify(data) : 'Loading...'}div>;
}

Code explanation: The useEffect hook fetches data when the component mounts. The effect will only run one time when the array is empty.

2. useLayoutEffect
useLayoutEffect works similarly to useEffect but runs synchronously right after the DOM has been updated. It’s used for operations that need to happen before the browser paints the UI, like measuring elements.

Use it sparingly, as it runs less frequently than useEffect. Here’s an example:

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

function Measure() {
  const divRef = useRef();

  useLayoutEffect(() => {
    console.log(divRef.current.getBoundingClientRect());
  }, []);

  return <div ref={divRef}>Measure me!div>;
}

Code explanation: useLayoutEffect measures DOM elements before the browser repaints.

3. useInsertionEffect
Exclusively for CSS-in-JS library developers, useInsertionEffect runs before useEffect and useLayoutEffect to ensure that CSS styles are inserted properly. It’s niche, but crucial for maintaining style integrity in complex applications.

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

function StyledComponent() {
  const [text, setText] = useState('Hover over me!');

  useInsertionEffect(() => {
    const style = document.createElement('style');
    style.textContent = `
      .hovered {
        color: red;
        font-size: 24px;
        transition: color 0.3s ease;
      }
    `;
    document.head.appendChild(style);

    return () => {
      document.head.removeChild(style);
    };
  }, []);

  return (
    <div
      className="hovered"
      onMouseEnter={() => setText('You hovered over me!')}
      onMouseLeave={() => setText('Hover over me!')}
    >
      {text}
    div>
  );
}

Code explanation: The useInsertionEffect hook is used to inject styles into the DOM at runtime, making the component’s styling dynamic and scoped only to that component.

Ref Hook

1. useRef
useRef allows you to persist values across renders without causing re-renders. It's perfect for storing mutable values or referencing DOM elements. Whether you’re handling intervals, storing a DOM node, or keeping track of the previous state, useRef has you covered.

import React, { useRef } from 'react';

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

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Inputbutton>
    div>
  );
}

Code explanation: This React code uses useRef to create a reference to an input element. When the button is clicked, the handleFocus function triggers the input field to gain focus using inputRef.current.focus().

Performance Hooks

1. useMemo
For optimizing performance, useMemo is your friend. It caches the results of expensive computations and only recalculates when dependencies change. This can significantly improve performance, especially in scenarios involving heavy calculations.

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

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

  const expensiveComputation = useMemo(() => {
    return count * 100;
  }, [count]);

  return (
    <div>
      <p>Expensive Computation: {expensiveComputation}p>
      <button onClick={() => setCount(count + 1)}>Increase Countbutton>
    div>
  );
}

Code explanation:This React code uses useMemo to optimize an expensive calculation (count * 100). The calculation only re-runs when count changes. The button increments count, triggering a UI update with the new result.

2. useCallback
useCallback is similar to useMemo, but it focuses on memoizing callback functions. This is useful for preventing unnecessary re-renders of child components by keeping functions stable across renders.

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

function Child({ onClick }) {
  return <button onClick={onClick}>Click mebutton>;
}

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

  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);

  return (
    <div>
      <Child onClick={handleClick} />
      <p>Count: {count}p>
      <button onClick={() => setCount(count + 1)}>Increase Countbutton>
    div>
  );
}

Code explanation: This React code uses useCallback to memoize the handleClick function, preventing re-creation on every render. The Child component uses this function for its button. The parent updates count independently.

Context Hook

1. useContext
The useContext hook simplifies accessing context values. It reads the value from the nearest context provider and works seamlessly across nested components. This makes it easier to manage global states or themes.

import React, { useContext, createContext } from 'react';

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button>{theme}button>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    ThemeContext.Provider>
  );
}

Code explanation: This React code uses createContext to create a ThemeContext. useContext accesses the context value, displaying it in the button. The App component provides "dark" as the theme to ThemedButton.

Transition Hook

1. useTransition
useTransition lets you mark specific state updates as low-priority, enhancing the user experience by keeping the app more responsive during intensive computations or transitions. This improves the user experience by making the app more responsive.

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

function TransitionComponent() {
  const [count, setCount] = useState(0);
  const [isPending, startTransition] = useTransition();

  const handleClick = () => {
    startTransition(() => {
      setCount((prevCount) => prevCount + 1);
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Increase Countbutton>
      {isPending ? <p>Loading...p> : <p>Count: {count}p>}
    div>
  );
}

Code explanation: This code uses useTransition to increment count without blocking the UI. While the state updates, isPending shows "Loading...". Clicking the button triggers a smooth, non-blocking state transition.

Some Random Hooks

1. useDeferredValue
Similar to useTransition, useDeferredValue helps in deferring state updates to keep the app responsive. It schedules updates to happen at an optimal time, enhancing the user experience without manual intervention.

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

function DeferredComponent() {
  const [value, setValue] = useState('');
  const deferredValue = useDeferredValue(value);

  return (
    <div>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <p>Deferred Value: {deferredValue}p>
    div>
  );
}

Code explanation: useDeferredValue delays the update of deferredValue to ensure that the UI remains responsive.

2. useDebugValue
useDebugValue is a hook primarily for debugging. It lets you label custom hooks in React DevTools, making it easier to track and debug your hooks.


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

function useCustomHook(value) {
  useDebugValue(value ? "Has Value" : "No Value"); return value; }
function DebugComponent() { const [value, setValue] = useState(''); const customValue = useCustomHook(value);

return (
 <input value={value} onChange={(e) => setValue(e.target.value)} />
Value: {customValue}
); }

Code explanation: This code uses useDebugValue to show "Has Value" or "No Value" in React DevTools based on value. useCustomHook is used in DebugComponent to track the input state and display it dynamically.

3. useId
useId generates unique IDs for elements, ensuring that form inputs and labels are properly linked without conflicts. It’s particularly useful when dealing with dynamically repeated elements.


import React, { useId } from 'react';

function FormComponent() {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>Name: label>
      <input id={id} type="text" />
    div>
  );
}

Code explanation: useId ensures that form elements have unique IDs, avoiding potential conflicts.

Conclusion

React hooks can seem overwhelming at first, but with this guide, you’re well-equipped to handle them. Mastering these hooks improves your React skills and makes your development process smoother and more efficient.

For a deeper dive and hands-on practice, check out my comprehensive React Bootcamp, where you’ll find interactive challenges, videos, and cheat sheets to reinforce your knowledge.

ReactHooks - freeCodeCamp.org

How to Simplify Your React Components with Derived State

Table of Contents

Prerequisites

What Is a Derived State?

How to Derive State From Existing Data

How to Derive State From Props or Other State

The Problem With Extra States

Handling Email Changes

Parent Component

How to Solve This with Derived States

How to Derive State From a URL

Syncing with useEffect

With no filter:

With a predefined filter:

Initializing useState Directly

Handling Changes

Using Derived State

How to Derive State From External Data

Derive Directly From React Query

How to Prevent Recalculation of a Derived State

When to Use useState

Controlled Input

Independent State Changes

Conclusion

How to Build a Reusable useSearch Hook in React

Outline

Who Should Read This?

What You’ll Learn

Prerequisites

The Problem With Simple Search Implementations

How to Build a Reusable useSearch Hook

How to Create the Hook

How to Handle the Query with useDebounce

How to Optimize Performance with React.useMemo

How to Chain Filters with .reduce()

How to Create the Filters

1. The Search Filter

2. The Helper Functions

3. The Pagination Filter

How to Use the Hook with Search and Pagination Filters

How to Handle Typos in Search

Step 1: Building the n-gram Similarity Algorithm

Step 2: Adding Fuzzy Search into the Search Filter

Step 3: Using Fuzzy Search in the useSearch Hook

How to Use the Ready-Made useSearch Hook

How to Use it in Your Component

Step 1: Install the hook

Step 2: Import and use the hook

Conclusion

How to Build a Countdown Timer with React – A Step-by-Step Guide

Table of Contents

Prerequisites

1. Set Up Your React App

2. Create the Count Down Component

3. Implement Time State Management and Functionality

4. Create a Countdown Form

5. Handle the Countdown Start, Stop, and Reset Functionality

6. Format the Event Date and Time

7. Display the CountDown Timer

8. Styling the Countdown Timer Component

Conclusion

Learn React Hooks – Common Hooks Explained with Code Examples

What We’ll Cover:

Prerequisites:

Getting Started

What are Hooks?

Types of React Hooks

State Management Hooks

1. useState

2. useReducer

Effect Hooks

Ref Hook

Performance Hooks

Context Hook

Transition Hook

Some Random Hooks

Conclusion

Syncing with `useEffect`

Initializing `useState` Directly

When to Use `useState`

How to Build a Reusable `useSearch` Hook

How to Handle the Query with `useDebounce`

How to Optimize Performance with `React.useMemo`

How to Chain Filters with `.reduce()`

Step 3: Using Fuzzy Search in the `useSearch` Hook

How to Use the Ready-Made `useSearch` Hook

1. `useState`

2. `useReducer`