Medium
React: Optimizing Product Search Performance with Debounced Text Highlighting
In an e-commerce product catalog, you need to implement a search feature that highlights matching terms. Which approach fixes the performance issue in this code?
1function ProductSearch({ products, searchTerm }) {2 const [filteredProducts, setFilteredProducts] = useState([]);3 const [highlight, setHighlight] = useState('');45 useEffect(() => {6 const results = products.filter(product =>7 product.name.toLowerCase().includes(searchTerm.toLowerCase())8 );9 setFilteredProducts(results);10 setHighlight(searchTerm);11 }, [searchTerm, products]);1213 return (14 <div>15 {filteredProducts.map(product => (16 <div key={product.id} className="product-card">17 <HighlightText18 text={product.name}19 highlight={highlight}20 />21 <p>{product.price}</p>22 </div>23 ))}24 </div>25 );26}