Порожні залежності з useMemo або useCallback VS useRef

У цьому випуску GitHub я по суті запропонував зміни:

x = useCallback( ... , []);

До:

x = useRef( ... ).current;

Два однакові, але з useRefReact не порівнюють залежності.

На що надійшла відповідь із запитанням:

Чи коли-небудь виникає ситуація, коли безальтернативний useMemo або useCallback був би кращим вибором, ніж useRef?

Я не можу придумати жодного, але, можливо, я не помітив деяких випадків використання.

Тож хто може подумати про таку ситуацію?

reactjs react-functional-component

— Іжакі
джерело

Відповіді:

Документація щодо API React Hooks:

Майте на увазі, що useRef не повідомляє вас про зміну його вмісту. Змінення властивості .current не викликає повторного відтворення ... Використання відкликання зворотного дзвінка гарантує, що навіть якщо дочірній компонент відобразить виміряний вузол пізніше (наприклад, у відповідь на клацання), ми все ще отримуємо повідомлення про це у батьків компонент і може оновити вимірювання.

Більше про це можна прочитати тут і тут .

— ірасуна
джерело

Я думаю, це відповідає на питання, але я підозрюю, що це неправильно. У пісочниці Реагувати приклад зміни useCallback(x,[])в useRef(x)творах же.

— Іжакі

useRef(x).currentце є.

— Іжакі

Я сподіваюся, що я помиляюся, але я зробив справу про те, чому документи помиляються: github.com/reactjs/reactjs.org/isissue/2570

— Іжакі

Я не зовсім впевнений щодо useCallback(cb, [])проти useRef(cb).currentсебе. Хоча, useMemo(cb, [])відрізняється від useRef(cb).currentсенсу, який useMemo"перерахує запам'ятоване значення лише тоді, коли одна із залежностей змінилася". Проти того, useRefщо завжди перераховують значення незалежно від того.

— irasuna

useRefніколи не перераховується - вона завжди повертає початкове значення.

— Іжакі

Хоча ви можете використовувати useRef для емуляції useCallback або з порожньою залежністю, ви не можете використовувати його для всіх можливих сценаріїв useCallback, які слід нагадувати при зміні будь-якої залежності.

Крім того, це не призведе до великої різниці в продуктивності, якщо ви використовуєте useCallback with empty dependencyабо використовуєтеRef, оскільки він не повинен виконувати важких порівнянь.

Крім того, якщо ви трохи змінили реалізацію функції, щоб вам довелося відтворити її на певній зміні парам, ви можете просто оновити реалізацію useCallbackі додати в додатковий парам як залежність. Однак якщо ви реалізуєте це за допомогою useRef, вам доведеться повернутися доuseCallback

— Шубхам Хатрі
джерело

Дякую. Як випливає з назви, це випадок суворо порожніх залежностей.

— Іжакі

@Izhaki Я розумію, що ви ставитесь до суворо порожніх залежностей, і тому я зазначив, що у випадку порожньої залежності немає різниці. Але це коли ви намагаєтеся внести ще зміни, можливо, вам знадобиться зовсім небагато рефактор

— Shubham

Оскільки вихід струму useRef (() => {...}.) Не змінюється.

Що може спричинити дивні побічні ефекти у вашому коді. Я можу змінити значення струму в будь-який час. https://codesandbox.io/s/confident-monad-vjeuw

Це був би корисний приклад для небажання використовувати useRef

— Даніель Дуонг
джерело

Але x = useRef(value).currentніколи не повертає змінювані екземпляри - refніколи не повертається; currentє. Це те саме, що і з useCallbackверсією.

— Іжакі