Defer Value Updates with useDeferredValue for UI Responsiveness

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

function SearchInput() {
  const [inputValue, setInputValue] = useState('');
  const deferredInputValue = useDeferredValue(inputValue);

  // Imagine this component renders a very long list based on the search query
  // and takes significant time to render.
  const SlowSearchResults = ({ query }) => {
    const startTime = performance.now();
    // Simulate a heavy rendering task
    const items = Array.from({ length: 10000 }).map((_, i) => {
      return <div key={i}>{i}. Search result for: {query}</div>;
    });
    const endTime = performance.now();
    console.log(`Rendered for query '${query}' in ${(endTime - startTime).toFixed(2)}ms`);
    return (
      <div style={{ maxHeight: '300px', overflowY: 'auto', border: '1px solid lightgray', marginTop: '10px' }}>
        <h3>Results for "{query}":</h3>
        {items}
      </div>
    );
  };

  return (
    <div style={{ padding: '20px' }}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Type to search..."
        style={{ width: '300px', padding: '8px' }}
      />
      <p>Input Value (immediate): {inputValue}</p>
      {/* This component will render with a deferred value, making the input responsive */}
      <SlowSearchResults query={deferredInputValue} />
    </div>
  );
}

export default SearchInput;