Searching and filtering data is a common feature for websites and apps, especially in e-commerce. In this article, we will discuss how to build a search and filter feature for products using React. The product data will be queried from a ( ) with the UI updated instantly. We will also talk about how the debounce technique handles state management using Hooks and API usage optimization. headless CMS Cosmic Install the Template Demo Content To get started with this example, install the template which includes the demo content that we will use for the search and filter functionality. Or you can skip this step and just follow along with the code. uNFT Marketplace Log in to your . Cosmic account Go to the and click “Select Template”. uNFT Marketplace Follow the steps to create a new Project and Bucket and import the demo content. See the demo content now installed in your Bucket. Go to Products and note the Metafields which contain the data that we will use for our React search/filter feature. Create the Search/Filter React App. To make things easier, we’ve already built a small app with the search/filter feature available on . StackBlitz Using the Cosmic API, we can filter the product results by search criteria. Now, let’s see how it works. Create the Search/Filter Query To filter the products in our feature, we will need to send a request to the Cosmic API to get only the products that match the search criteria. We will use to do this. Cosmic Queries To create the query, we create an object with properties that match up with the Object Metadata values that we are searching for like , , and . query color price categories Here is an example with comments to explain what each query property does. const query = {
  // Find Objects in products Object Type
  "type":"products"
  // Find products with a price greater than or equal to 10 and less than or equal to 100
  "metadata.price":{
    "$gte":10,
    "$lte":100
  },
  // Find products that have the color Blue
  "metadata.color":"Blue",
  // Find products that have the category Sale (uses category Object id)
  "metadata.categories":"627e23f18bb13a000911ea55",
} After we build our query, we send the query to the using the method. We use to limit the response to only the properties we need. Here's an example of what the implementation looks like. Cosmic NPM module getObjects props import Cosmic from 'cosmicjs';

const bucket = Cosmic().bucket({
  slug: "YOUR_COSMIC_BUCKET_SLUG",
  read_key: "YOUR_COSMIC_BUCKET_READ_KEY",
});

const params = {
  query,
  props: 'title,slug,metadata,created_at'
}
const data = await bucket.getObjects(params); Enter fullscreen mode. Exit fullscreen mode. Now, let’s get into the details about how React handles the UI state updates using Hooks. React Hooks React uses one-way data flow, passing data down the component hierarchy from parent to child components and Hooks allows function components to have access to state. For every search and filter update to the input fields, we are adding state to the React application using the state hook . useState // App.js
const [search, setSearch] = useState('');
const [{ min, max }, setRangeValues] = useState({ min: '', max: '' }); Enter fullscreen mode. Exit fullscreen mode. To display the filtered data on the webpage, we map over the array and display the appropriate list of products. filterResult // App.js
<div className={styles.list}>
  {filterResult?.length ? (
    filterResult?.map(product => (
      <Card className={styles.card} item={product} key={product.slug} />
    ))
  ) : (
    <p className={styles.inform}>Try another category!</p>
  )}
</div> React Custom Hook useDebounce When the user types something in the input field, the state of the variable will be updated. To improve the search and filter experience, we will create a . search React Custom Hook useDebounce This hook enables a debounce that clears any fast-changing value. The debounced value will only reflect the latest value when the hook has not been called for the specified time period. When used in conjunction with , you can ensure that expensive operations like API calls are not executed too frequently. useDebounce useEffect // utils/hooks/useDebounce.js
import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    // Update debounced value after delay
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // Cancel the timeout if value changes (also on delay change or unmount)
    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]); // Only re-call effect if value or delay changes

  return debouncedValue;
}

export default useDebounce; The example below allows you to search the Cosmic API and uses to prevent API calls from being fired on every keystroke. The goal is only to have the API call fire when the user stops typing, so we aren't hitting the Cosmic API rapidly. useDebounce // App.js
const [search, setSearch] = useState('');

// Debounce search term so that it only gives us latest value
// If search has not been updated within last 500ms, query the Cosmic API
const debouncedSearchTerm = useDebounce(search, 500);

useEffect(() => {
  let isMount = true;

  if (isMount && debouncedSearchTerm?.length) {
    handleFilterDataByParams({
      search: debouncedSearchTerm,
    });
  }

  return () => {
    isMount = false;
  };

}, [debouncedSearchTerm]); Conclusion Searching and filtering is a common feature for many websites and apps which can prove challenging to build. But by using the right tools and techniques, building this feature can be made easier and more enjoyable for the end user. In this article, we showed you how you can use Cosmic Queries, React Hooks, and debounce to create a great search and filter experience. The examples explained in this article are all part of the . You can view the full demo , install the in your Cosmic dashboard, or clone the . To learn more about Cosmic Queries, go to the . uNFT Marketplace app template here app template GitHub repository Cosmic documentation If you have any questions about Cosmic integration and features, you can reach out to them on , , or follow the . Twitter Slack YouTube channel Also published here

Flow

Instantly

Slack

Stripe

Twitter

YouTube

React 18 Suspense fetch data from a headless CMS

Building an uNFT Marketplace Using Next.js, Cosmic and Stripe 

Too Long; Didn't Read

How to Search and Filter Data Using React Hooks and a Headless CMS 

How to Search and Filter Data Using React Hooks and a Headless CMS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Build a Production Ready Restaurant Website with Next.js 12 and Cosmic

Angular vs React vs Vue: The Most Versatile Programming Language for 2020

10 Static Site Generators to Watch in 2020

10 Open-source Headless CMS to Supercharge Your Development in 2022

3 Evolutions of CMS (Traditional 👉 Headless 👉 Serverless)

4 Critical Capabilities of Headless CMS API You Need to Integrate with External Systems

Build a Production Ready Restaurant Website with Next.js 12 and Cosmic

Angular vs React vs Vue: The Most Versatile Programming Language for 2020

10 Static Site Generators to Watch in 2020

10 Open-source Headless CMS to Supercharge Your Development in 2022

3 Evolutions of CMS (Traditional 👉 Headless 👉 Serverless)

4 Critical Capabilities of Headless CMS API You Need to Integrate with External Systems

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps