Продвинутая мемоизация с useRef | React Hooks - useLatest

[@grenadier4702]

Из этой идеи можно сделать классный апгрейд для useCallback, где функция будет одна и та же, а вот используемые в ней переменные всегда актуальными function useEvent any>(event: T) { const eventRef = useRef(event); useLayoutEffect(() => { eventRef.current = event; }); return useCallback(() => { eventRef.current(); }, []); }

[@ayub_begimkulov]

Да, использовал подобную технику в других видео по хукам.

[@669pain]

В данном случае можно было просто использовать useRef и передать его в ref инпута. Тогда не понадобился бы самописный хук, useState и useCallback, а компонент получился бы на много компактнее и легче.

[@ayub_begimkulov]

В данном случае да, 100%. Возможно стоило уделить этому больше внимания, но я говорю про более сложные кейсы, когда нам нужно иметь актуальное значение без прокидывания deps’ов. Хороший пример - хук useEventListener. Не хотелось бы при обновлении стейта каждый раз переподписываться на событие в useEffect. В таких случаях данный подход бывает очень полезен и можно много подобных примеров найти в библиотеках на GitHub.

[@shevdev]

По звуку клавиатуры сразу понял что у вас макбук аир м1 :D

[@ayub_begimkulov]

Ага, он самый)

[@669pain]

Если же все таки захотелось свойство text положить в реф, то его не нужно обновлять через эффекты. Он сохраняет ссылку на объект, следовательно в нем всегда буду актуальные данные

[@ayub_begimkulov]

Возможно не так тебя понял, но да, реф можно обновлять и в onChange и в самом теле компонента - оба варианта будут рабочие. Но с данным подходом через useLatest есть один важный момент - Универсальность. В данном случае нам нужен актуальный текст инпута, а что, если нам нужны были бы какие-то данные, которые приходят из пропсов? Тогда уже не прошёл бы трюк с обновлением ref в onChange. А по поводу заворачивания в useLayoutEffect вместо обновления в теле функции - это нужно для поддержки concurrent more React. Я не стал этому выделять много внимания, но есть хорошая статья - frontarm.com/daishi-kato/use-ref-in-concurrent-mode/ Может сниму как-то видео об этом. Спасибо за фидбэк!

[@669pain]

@@ayub_begimkulov 🤝

[@raff_m_d6971]

крассава

[@ayub_begimkulov]

Спасибо!