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