Комментарии 20
useCallback предотвращает создание новой функции при каждом рендере
Не предотвращает. Дальше можно не читать
Привет! Спасибо за комментарий! Благодаря ему я еще раз сходил в документацию и проверил информацию. Ты ошибаешься - UseCallback нужен чтобы при каждом ререндное не создавалась новая функция, это полезно когда мы передаем такую функцию к качестве коллбэка пропсом в компонент который обернут в memo. Смысл хука не в том что ссылка на непримитивный тип данных (функцию) сохраняется а в том что происходит дальше - ссылка сохраняется и попадает в прост где строго равна предыдущей передаче в пропс
Привет. Функция, тем не менее, будет создаваться каждый раз. Просто она будет выбрасываться, если зависимости не изменились)
Так работает JavaScript. Функция каждый рендер будет создаваться и передаваться как первый аргумент useCallback.
Еще глубже вник в тему. Действительно, JavaScript инициализирует функцию при каждом рендере, но useCallback (при неизменных значениях в массиве зависимостей) не позволяет передать новую функцию дальше. Это также помогает сборщику мусора эффективнее управлять памятью, так как одна и та же функция повторно используется при каждом рендере.
Лайк комментарию! Даже разработчики документации React упростили объяснение, написав: "useCallback is a React Hook that lets you cache a function definition between re-renders."
Автор перепутал с useRef, скорее всего)
Получается, что однозначно.
Мемоизация в реакте нужна только для трудоемких операций. Нет смысла оборачивать все подряд в memo().
В этой статье я углублюсь в их работу...
А где? Вроде бы информации не из документации особо нет. Ни кода, ни капота, ни многозначности(
Речь о мемоизации же. Причем тут кеширование?
Как я понимаю, кеширование в реакт это и есть мемоизация. Кеширование вне механизмов реакт тут не рассматривается
Во-первых, спасибо за публикацию. Интересно.
Во-вторых, комментарий по поводу memorization vs caching. Разница есть.
Мемоизация — это особая форма кэширования, которая подразумевает кэширование возвращаемого значения функции на основе ее параметров.
Кэширование — более общий термин; например, HTTP-кэширование — это кэширование, но не мемоизация.
Ну, и реакт часто рассматривается не как библиотека рендеринга, а как фреймворк. Поэтому в вашем случае кеширование в реакте - это мемоизация.
Хорошая статья!
Хотелось бы немного больше тонкостей о работе мемоизации в React, так как заголовок кричит что мы получим что то новое, но в целом статья очень даже неплохая)
Добро пожаловать на Хабр, в это уютное и немного токсичное болотце)
Спасибо 🙏🏽
По поводу заголовка - буду более внимателен в будущем)
По поводу критики - тут смотря как ее воспринимать)) И что с ней делать. Можно ее обернуть в рост и устранение пробелов в знаниях
Хотелось бы немного больше тонкостей о работе мемоизации в React
Кажется, тема затерта до дыр вдоль и поперек. На Хабре полно постов с разбором вплоть до копания исходников. Меня впечатлила вот эта статья.
Еще в статью нужно добавить - у React.memo() - есть 2й необязательынй параметр , где можно более узко настроить при каких пропсах изменениях будет перерендер (но это уже совсем для специфических сценариев, и тут надо быть осторожным)
useCallback команда Реакта ввела потому что посчитала мемоизацию функций через useMemo (да, если вернуть не результат , а функцию - получится то же самое что и при useCallback) , достаточно усложненным, а потребность передавать функцию в другой компонент чтобы она там была вызвана - возникает достаточно часто пор реализации сложных интерфейсов , поэтому решили ввести отдельный хук для мемомзации именно функций - useCallback.
Кеширования в React — все ли так однозначно?