ReactJS Hook Pattern ~Optimizing rendering using useDeferredValue~

・This pattern defers updating a value until more urgent updates have been completed. This helps to keep the UI responsive, as high-priority updates can be rendered before lower-priority ones.

import { useState, useDeferredValue, memo } from "react";

function App() {
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query)

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

const SlowItems = memo(({ query }) => {
  const items = [];
  for (let i = 0; i < 300; i++) {
    items.push(<SlowItem key={i} text={query} />);
  }
  return <ul className="items">{items}</ul>;
});

const SlowItem = ({ text }) => {
  let startTime = performance.now();
  while (performance.now() - startTime < 1) {
  }

  return <li className="item">Text: {text}</li>;
};

export default App;