Function Demo

videos/long/learn-react-hooks-useDeferredValue/index.tsx:9–24

()

import SlowList from './SlowList';

const Demo = () => {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);

  return (
    <div className='tutorial'>
      <SlowList text={deferredQuery} />
      <input
        type='text'
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder='Search...'
      />
    </div>
  );
};

export default Demo;