React: memo и useMemo Это инструменты, решающие конкретные задачи, или головная боль разработчиков? Прежде чем отвечать на этот вопрос, рассмотрим три примера: 1️⃣ Контекст function Page() { const { id } = useParams(); const { data } = useQueryData(); // ...fetching other data return ( <Context.Provider value={{ id, value: data.value }} > <Content /> </Context.Provider> ); } При каждом рендере провайдер получает новый объект. При этом, подписанные на этот контекст компоненты также будут выполнены. Как это выглядит: 180ms <= первый рендер 161ms <= данные пришли 107ms <= данные не меняются 156ms 107ms Обернём данные для контекста в useMemo: 197ms <= первый рендер 160ms <= данные пришли 10ms <= !!! 18ms 9ms Экономия ~330 ms. 2️⃣ Список из 100 карточек function Page() { const [items, showMore] = useSomeList(); return ( <> <List> {items.map((item) => ( <Item {...item} /> ))} </List> <Button onClick={showMore}> Ещё </Button> </> ); } Результаты первого и второго рендера: 51ms <= 50 items 97ms <= 100 items Обернём Item в React.memo: 58ms <= 50 items 63ms <= 100 items Во втором рендере получаем экономию ~34 ms. 3️⃣ Поиск по массиву из ~900 объектов function Modal() { const search = useSearch(); const users = useUsers(); const list = users .filter(bySearch(search)) .sort(toSomeOrder) .slice(0, 20); return ( <> <Search {...search} /> <UsersList data={list} /> </> ); } Добавим debounce для поиска и useMemo для list. В итоге, среднее значение рендера на каждый введённый, в поисковую строку, символ будет: В исходном варианте: ~22ms debounce + useMemo: ~20ms При этом, с debounce рендеров будет больше, а формирование list в обоих случаях занимает ~2ms. *️⃣ Выводы Однозначного ответа когда, где и как именно их нужно применять нет, в отличие от того же createMemo из SolidJS. На примерах также видно, что какого-то прям заметного профита, который будет стоить потрачено времени и сил, тоже нет. В общем, если использовать их точечно, когда реально что-то тормозит и это заметно, то это похоже на инструменты, в остальных случаях — лишняя когнитивная нагрузка (головная боль). П.С. Все замеры производились на MacBook Air m1 в Chrome с 4х замедлением CPU и React в dev режиме.