Продвинутая мемоизация с useRef

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

Рет қаралды 3,558

2 жыл бұрын

В данном видео расскажу о том, как можно совершать продвинутую мемоизацию с помощью хука useRef.
Мой канал в Telegram:
telegram.me/ayub_begimkulov_c...

Пікірлер: 11

@grenadier4702 2 жыл бұрын

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

@ayub_begimkulov 2 жыл бұрын

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

@669pain 2 жыл бұрын

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

@ayub_begimkulov 2 жыл бұрын

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

@shevdev 2 жыл бұрын

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

@ayub_begimkulov 2 жыл бұрын

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

@669pain 2 жыл бұрын

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

@ayub_begimkulov 2 жыл бұрын

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

@669pain 2 жыл бұрын

@@ayub_begimkulov 🤝