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

function generate() {
  counter.inc('generation');
  return Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`), // Generating a large list
}

function filter(items: string[], query: string) {
  counter.inc('filter');
  return items.filter((item) => item.toLowerCase().includes(query.toLowerCase()));
}

const LargeListFilter = () => {
  const [query, setQuery] = useState('');
  const [name, setName] = useState('');
  
  // 1. optimise generation
  const items = generate();
  
  // 2. Create optimised filtering
  const filteredItems = []

  return (
    <div>
      <h1>Large List Filter</h1>
      <label htmlFor="query">Query</label>
      <input
        id="query"
        type="text"
        placeholder="Search items"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <ul>
        {filteredItems.slice(0, 50).map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <p>{filteredItems.length} items match your search.</p>
      
      <h1>Other Details</h1>
      <label htmlFor="name">Name</label>
      <input
        type="text"
        id="name"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
};

export default LargeListFilter;

OBJECTIVE: Create a React component that filters a large list of items based on user input. Use useMemo to optimize performance, ensuring the filtered list is only recalculated when the input or the list changes. -------------------------------------------------------------------------------- CODE IMPLEMENTATION: import React, { useState, useMemo } from 'react'; import { counter } from 'utils'; function generate() { counter.inc('generation'); return Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`), // Generating a large list } function filter(items: string[], query: string) { counter.inc('filter'); return items.filter((item) => item.toLowerCase().includes(query.toLowerCase())); } const LargeListFilter = () => { const [query, setQuery] = useState(''); const [name, setName] = useState(''); // 1. optimise generation const items = generate(); // 2. Create optimised filtering const filteredItems = [] return ( <div> <h1>Large List Filter</h1> <label htmlFor="query">Query</label> <input id="query" type="text" placeholder="Search items" value={query} onChange={(e) => setQuery(e.target.value)} /> <ul> {filteredItems.slice(0, 50).map((item, index) => ( <li key={index}>{item}</li> ))} </ul> <p>{filteredItems.length} items match your search.</p> <h1>Other Details</h1> <label htmlFor="name">Name</label> <input type="text" id="name" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} /> </div> ); }; export default LargeListFilter; -------------------------------------------------------------------------------- EXPLANATION: 1. The Full List: * A large list of 10,000 items is generated on every component refresh. Optimise this with useMemo. 2. Filtered List: * Filtering must be performed using useMemo to ensure the expensive .filter() operation only runs when queryor items changes. 3. Displaying Results: * Only the first 50 items of the filtered list are rendered for better performance. -------------------------------------------------------------------------------- EXPECTED BEHAVIOR: 1. Typing in the input filters the list in real time, showing items matching the query. 2. The expensive .filter() operation does not re-run unnecessarily, thanks to useMemo. 3. Changing the name uses memoised filtered list and generated items

Join the discussion to ask questions, share your thoughts, and discuss with other learners