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

В данном видео расскажу о том, как можно совершать продвинутую мемоизацию с помощью хука useRef.

Мой канал в Telegram:

[pain]

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

[grenadier]

Из этой идеи можно сделать классный апгрейд для useCallback, где функция будет одна и та же, а вот используемые в ней переменные всегда актуальными

function useEvent<T extends (...args: any[]) => any>(event: T) {
const eventRef = useRef(event);

useLayoutEffect(() => {
eventRef.current = event;
});

return useCallback(() => {
eventRef.current();
}, []);
}

[shevdev]

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

[pain]

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