Improve Responsiveness with `useDeferredValue`

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

// A component that simulates an expensive rendering operation (e.g., a long list render)
function ExpensiveList({ query }) {
  const items = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);

  const filteredItems = items.filter(item =>
    item.toLowerCase().includes(query.toLowerCase())
  );

  // Simulate a delay to emphasize the deferred effect
  let startTime = performance.now();
  while (performance.now() - startTime < 3) {
    // Block rendering for 3ms
  }

  return (
    <div>
      <h3>Results for "{query}" ({filteredItems.length} items)</h3>
      <ul style={{ maxHeight: '200px', overflowY: 'auto', border: '1px solid #ccc' }}>
        {filteredItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

function SearchBarWithDeferred() {
  const [inputValue, setInputValue] = useState('');
  // Defer the value that will be passed to the ExpensiveList component.
  // This means the ExpensiveList will render with a "stale" value temporarily,
  // allowing the input to update immediately.
  const deferredQuery = useDeferredValue(inputValue);

  return (
    <div>
      <h1>Search with Deferred Value</h1>
      <p>Type into the search bar. Notice how the input remains responsive even during list updates.</p>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Search for items..."
        style={{ width: '300px', padding: '8px', fontSize: '16px' }}
      />
      <hr />
      {/* Pass the deferredQuery to the expensive component */}
      <ExpensiveList query={deferredQuery} />
    </div>
  );
}

export default SearchBarWithDeferred;