Building a High-Performance Dynamic Product Filter Component in React and Tailwind CSS

javascript

export const PRODUCTS_DATA = [

  { id: 1, name: "UltraFit Running Shoes", category: "Footwear", price: 120, rating: 4.8 },

  { id: 2, name: "Pro-Grip Training Gloves", category: "Accessories", price: 35, rating: 4.5 },

  { id: 3, name: "AirWeave Sports Hoodie", category: "Apparel", price: 75, rating: 4.6 },

  { id: 4, name: "Pulse Smart Fitness Watch", category: "Electronics", price: 240, rating: 4.9 },

  { id: 5, name: "Apex Cushion Sneakers", category: "Footwear", price: 150, rating: 4.2 },

  { id: 6, name: "Thermal Hydro Flask", category: "Accessories", price: 45, rating: 4.7 },

];



export const CATEGORIES = ["All", "Footwear", "Apparel", "Accessories", "Electronics"];



Step 2: Implementing the Core Filter Component

We will utilize the useMemo hook from React to ensure maximum performance. This caches the filtered results and only recalculates them when our criteria actually change, preventing unnecessary re-renders.



Here is the complete code for ProductFilter.jsx:



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



const PRODUCTS_DATA = [

  { id: 1, name: "UltraFit Running Shoes", category: "Footwear", price: 120, rating: 4.8 },

  { id: 2, name: "Pro-Grip Training Gloves", category: "Accessories", price: 35, rating: 4.5 },

  { id: 3, name: "AirWeave Sports Hoodie", category: "Apparel", price: 75, rating: 4.6 },

  { id: 4, name: "Pulse Smart Fitness Watch", category: "Electronics", price: 240, rating: 4.9 },

  { id: 5, name: "Apex Cushion Sneakers", category: "Footwear", price: 150, rating: 4.2 },

  { id: 5, name: "Thermal Hydro Flask", category: "Accessories", price: 45, rating: 4.7 }

];



const CATEGORIES = ["All", "Footwear", "Apparel", "Accessories", "Electronics"];



export default function ProductFilter() {

  const [searchQuery, setSearchQuery] = useState('');

  const [selectedCategory, setSelectedCategory] = useState('All');

  const [maxPrice, setMaxPrice] = useState(300);

  const [sortBy, setSortBy] = useState('featured');



  const filteredProducts = useMemo(() => {

    let result = [...PRODUCTS_DATA];



    if (searchQuery.trim() !== '') {

      result = result.filter(p => p.name.toLowerCase().includes(searchQuery.toLowerCase()));

    }

    if (selectedCategory !== 'All') {

      result = result.filter(p => p.category === selectedCategory);

    }

    result = result.filter(p => p.price <= maxPrice);



    if (sortBy === 'price-low') result.sort((a, b) => a.price - b.price);

    else if (sortBy === 'price-high') result.sort((a, b) => b.price - a.price);

    else if (sortBy === 'rating') result.sort((a, b) => b.rating - a.rating);



    return result;

  }, [searchQuery, selectedCategory, maxPrice, sortBy]);



  return (

    <div className="min-h-screen bg-slate-50 text-slate-800 p-6 md:p-12">

      <div className="max-w-6xl mx-auto">

        <header className="mb-8">

          <h1 className="text-3xl font-bold text-slate-900">Discover Products</h1>

          <p className="text-slate-500">Filter and find exactly what you need in real-time.</p>

        </header>



        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">

          <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 h-fit space-y-6">

            <div>

              <label className="block text-sm font-semibold text-slate-700 mb-2">Search</label>

              <input

                type="text"

                value={searchQuery}

                onChange={e => setSearchQuery(e.target.value)}

                placeholder="Search products..."

                className="w-full px-4 py-2 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"

              />

            </div>



            <div>

              <label className="block text-sm font-semibold text-slate-700 mb-2">Category</label>

              <div className="flex flex-wrap lg:flex-col gap-2">

                {CATEGORIES.map(category => (

                  <button

                    key={category}

                    onClick={() => setSelectedCategory(category)}

                    className="px-3 py-1.5 text-xs font-medium rounded-lg transition"

                  >

                    {category}

                  </button>

                ))}

              </div>

            </div>



            <div>

              <div className="flex justify-between items-center mb-2">

                <label className="text-sm font-semibold text-slate-700">Max Price</label>

                <span className="text-sm font-bold text-blue-600">${maxPrice}</span>

              </div>

              <input

                type="range"

                min="30"

                max="300"

                value={maxPrice}

                onChange={e => setMaxPrice(Number(e.target.value))}

                className="w-full h-2 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-blue-600"

              />

            </div>



            <div>

              <label className="block text-sm font-semibold text-slate-700 mb-2">Sort By</label>

              <select

                value={sortBy}

                onChange={e => setSortBy(e.target.value)}

                className="w-full px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"

              >

                <option value="featured">Featured</option>

                <option value="price-low">Price: Low to High</option>

                <option value="price-high">Price: High to Low</option>

                <option value="rating">Highest Rated</option>

              </select>

            </div>

          </div>



          <div className="lg:col-span-3">

            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-6">

              {filteredProducts.map(product => (

                <div key={product.id} className="bg-white rounded-2xl border border-slate-100 p-5 flex flex-col justify-between shadow-sm">

                  <div>

                    <span className="text-xs font-semibold text-blue-600 bg-blue-50 px-2.5 py-1 rounded-md uppercase">

                      {product.category}

                    </span>

                    <h3 className="font-bold text-slate-800 text-lg mt-2">{product.name}</h3>

                  </div>

                  <div className="flex justify-between items-center mt-6 pt-4 border-t border-slate-100">

                    <span className="text-xl font-extrabold text-slate-900">${product.price}</span>

                    <span className="text-amber-500 font-bold text-sm">★ {product.rating}</span>

                  </div>

                </div>

              ))}

            </div>

          </div>

        </div>

      </div>

    </div>

  );

}



Conclusion

By leveraging optimization hooks, we ensure that sorting and filtering are computed only when dependencies update, maintaining a rock-solid user experience. This architecture scales perfectly for e-commerce needs.