ЧТО ТАКОЕ КОЛБЭК РЕФЫ И КАК Я ИХ ИСПОЛЬЗУЮ | CALLBACK REF | REACT HOOKS

• Callback refs позволяют передавать свойства и функции при монтировании и демонтировании элементов.  

• Пример компонента Basic показывает, как работает callback ref.  

• При монтировании передается HTML-элемент, при демонтировании - null.  

• В браузере при монтировании компонента логируется div, при демонтировании - null.  

• При нажатии на кнопку логируется div, затем null.  

• Последовательность логирования сохраняется при многократном нажатии кнопки.  

• В компоненте с Force Update при каждом клике на кнопку происходит рендеринг.  

• В браузере компонент не монтируется и демонтируется корректно.  

• В консоли логируются два элемента при каждом рендеринге.  

• Проблема заключается в коде компонента, а не в логике.  

• При рендеринге компонента создается новый callback ref.  

• Реакция обновляет старый ref, что приводит к логированию двух элементов.  

• Реакция инвалидирует старый ref и инициализирует новый.  

• Это необходимо для корректной работы подписок и логики.  

• Проблема может возникнуть и с обычными refs, но с callback refs она проявляется особенно ярко.  

• В компоненте создаются два refs в зависимости от состояния аккаунта.  

• При изменении аккаунта вызывается эффект, который логирует значения refs.  

• В браузере значения refs меняются зигзагами при каждом клике на кнопку.  

• Проблема с callback refs проявляется и с обычными refs.  

• Это поведение характерно для всех типов refs.  

• Важно понимать, как работает инвалидация и обновление refs в React.  

• Минимизируйте коллбэки, используя хук или кастомный хук.  

• Проверьте работу решения в браузере, чтобы убедиться в его эффективности.  

• Используйте коллбэки для устранения лишних вызовов.  

• Разберитесь, как коллбэки вызываются и в какой момент.  

• Пример с функцией и дочерним компонентом.  

• Порядок вызовов коллбэков зависит от порядка рендеринга элементов.  

• Пример с компонентами GIF и Child.  

• Порядок вызовов коллбэков меняется в зависимости от порядка рендеринга.  

• Порядок элементов влияет на порядок вызовов коллбэков.  

• Пример компонента с отслеживанием размера элементов.  

• Использование ref для отслеживания изменений.  

• Проблемы с отслеживанием изменений при смене элементов.  

• Использование callback ref для решения проблемы.  

• Создание хука для отслеживания изменений.  

• Логика работы хука и создание функций для отслеживания изменений.  

• Создаем метод для отключения сервера.  

• Проверяем наличие сервера и вызываем метод для его отключения.  

• Добавляем коллбэки для отслеживания изменений.  

• Проверяем работу метода в браузере.  

• Метод корректно инициализируется и работает при изменении элемента.  

• Оптимизация: создание обзора один раз на уровне приложения.  

• Объединяем несколько рефов для управления фокусом.  

• Создаем хук для объединения рефов.  

• Хук принимает различные типы рефов и обновляет их.  

• Проверяем работу хука в браузере.  

• Фокус на элементе работает корректно.  

• Хук успешно решает проблему с фокусом.  

• Подводим итоги и проверяем работу в браузере.  

• Призываем оставлять лайки и делиться видео.  

• Упоминаем Telegram канал для дополнительного материала и записи на собеседования.