Не популярні корисні хуки в React (2/3)

const deferedValue = useDeferredValue(value);

Використовується, коли ви хочете мати можливість відкласти оновлення якогось компоненту на "трошечки потім", наприклад під час роботи з мишкою або мережевими запитами

const [point, setPoint] = useState({ x: 0, y: 0 });
const deferedPoint = useDeferredValue(point);
return (
  <>
    <div
      style={{ height: `50vh` }}
      onMouseMove={(e) => setPoint({ x: e.screenX, y: e.screenY })}
    ></div>
    <SomeComponent point={deferedPoint} />
  </>
);

Деталі: Значення deferedValue змінюється із невеликою затримкою, проміжні значення з'їдаються, а компонент отримує останнє значення. Відповідно ви зможете зеконимити на рендері дочірніх компонентів. Для цього потрібно реалізувати PureComponent або огорнути дочірній компонент в React.memo. Окрім цього, компонент який працює з deferedValue "не підвисає", оскільки React вміє відміняти рендери, викликані оновленням deferedValue

Cторонній ефект: це оптимізація швидкодії яка трохи ускладнює код, використовувати разом із вимірюванням.

@reactbeginners