Из этой идеи можно сделать классный апгрейд для useCallback, где функция будет одна и та же, а вот используемые в ней переменные всегда актуальными function useEvent any>(event: T) { const eventRef = useRef(event); useLayoutEffect(() => { eventRef.current = event; }); return useCallback(() => { eventRef.current(); }, []); }
@ayub_begimkulov2 жыл бұрын
Да, использовал подобную технику в других видео по хукам.
@669pain2 жыл бұрын
В данном случае можно было просто использовать useRef и передать его в ref инпута. Тогда не понадобился бы самописный хук, useState и useCallback, а компонент получился бы на много компактнее и легче.
@ayub_begimkulov2 жыл бұрын
В данном случае да, 100%. Возможно стоило уделить этому больше внимания, но я говорю про более сложные кейсы, когда нам нужно иметь актуальное значение без прокидывания deps’ов. Хороший пример - хук useEventListener. Не хотелось бы при обновлении стейта каждый раз переподписываться на событие в useEffect. В таких случаях данный подход бывает очень полезен и можно много подобных примеров найти в библиотеках на GitHub.
@shevdev2 жыл бұрын
По звуку клавиатуры сразу понял что у вас макбук аир м1 :D
@ayub_begimkulov2 жыл бұрын
Ага, он самый)
@669pain2 жыл бұрын
Если же все таки захотелось свойство text положить в реф, то его не нужно обновлять через эффекты. Он сохраняет ссылку на объект, следовательно в нем всегда буду актуальные данные
@ayub_begimkulov2 жыл бұрын
Возможно не так тебя понял, но да, реф можно обновлять и в onChange и в самом теле компонента - оба варианта будут рабочие. Но с данным подходом через useLatest есть один важный момент - Универсальность. В данном случае нам нужен актуальный текст инпута, а что, если нам нужны были бы какие-то данные, которые приходят из пропсов? Тогда уже не прошёл бы трюк с обновлением ref в onChange. А по поводу заворачивания в useLayoutEffect вместо обновления в теле функции - это нужно для поддержки concurrent more React. Я не стал этому выделять много внимания, но есть хорошая статья - frontarm.com/daishi-kato/use-ref-in-concurrent-mode/ Может сниму как-то видео об этом. Спасибо за фидбэк!