ReactCodeSmells: Використовуйте useCallback правильно!
2023 ж. 2 Нау.
992 Рет қаралды
👉 Третій випуск React Code Smells. Говоримо про useCallback, коли його потрібно використовувати, а коли ні
✉️ Telegram: t.me/reactbeginners
❤️ Підтримати канал: opencollective.com/farstar
💡Всі матеріали курсу: github.com/Drag13/react-learn...
Круте і зрозуміле пояснення:)
Прочитав назву як виховуйте useCallback правильно =)))
Вкрав цю назву до себе в ТГ, дякую)
Вопрос, когда я передам лямбду, обернутую в useCallback, в качестве атрибута другой функции или другой лямбды, эта лямбда все равно будет работать, но метод не будет рендориться при каждом вызове?т.к.лямбда-выражения - это не функция, а способ создания объектов-функций на месте. Функциональные объекты обычно используются там, где в цешке, например, используются указатели на функции в качестве обратных вызовов.Если объект функции очень мал, как в вашем примере,целесообразно его использование только один раз или вы не видите смысла в присвоении ему имени, вы можете записать объект функции в виде лямбда-выражения, что бы было понятно, что я имею ввиду. С функцией, которую вы показывали более менее понятно, когда вы используете Callback, вы как бы имитируете замыкание вокруг любых зависимостей, которые у него есть. Обратный вызов необходимо воссоздавать всякий раз, когда изменяется одна из этих зависимостей.Это означает, что у вас есть две зависимости - первая(функционально стабильная) и второй параметр (изменяющейся). Таким образом, когда вы заключаете это в useCallback и не объявляете изменяющийся параметр как зависимость, обратный вызов закрывается по начальному значению изменяющегося параметра, а затем всегда использует его для включения (именно поэтому переключение срабатывает один раз, и потом никогда).
тернарник в юзМемо, колбэк, который передаем в другой компонент - в юзКолбек, а сам другой компонент в мемо - в подавляющем большинстве случаев это будет адекватный варик. В 99% проектов тратить время на перфект-перформенс никто не даст, если это не реакт-нейтив.
Проблема с использованием useCallback или useMemo заключается в том, что его запоминание запомнит устаревшее значение состояния. Для решения этой проблемы можно сюдою добавить пустой массив зависимостей в качестве второго параметра useMemo и все!