Dipendenze vuote con useMemo o useCallback VS useRef

In questo numero di GitHub ho essenzialmente proposto di cambiare:

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

Per:

x = useRef( ... ).current;

I due sono uguali ma con useRefReact non confronta le dipendenze.

Per cui è arrivata una risposta con una domanda:

Esiste mai una situazione in cui un useMemo o useCallback senza dipendenza sarebbe una scelta migliore di useRef?

Non riesco a pensarne uno, ma potrei aver trascurato alcuni casi d'uso.

Qualcuno può pensare a tale situazione?

reactjs react-functional-component

— Izhaki
fonte

Risposte:

Documentazione API Per React Hooks:

Tieni presente che useRef non ti avvisa quando il suo contenuto cambia. La mutazione della proprietà .current non provoca un nuovo rendering ... L'uso di un riferimento callback assicura che anche se un componente figlio visualizza il nodo misurato in un secondo momento (ad esempio in risposta a un clic), riceviamo comunque una notifica al riguardo nel genitore componente e può aggiornare le misure.

Puoi leggere di più qui e qui .

— irasuna
fonte

Immagino che questo risponda alla domanda, ma sospetto che sia errato. Nell'esempio React sandbox, passare useCallback(x,[])a useRef(x)funziona allo stesso modo.

— Izhaki,

useRef(x).currentquesto è.

— Izhaki,

Spero di sbagliarmi, ma ho fatto un caso sul perché i documenti sono sbagliati: github.com/reactjs/reactjs.org/issues/2570

— Izhaki

Io non sono del tutto sicuro per quanto riguarda useCallback(cb, [])vs useRef(cb).currentme stesso. Sebbene, useMemo(cb, [])sia diverso useRef(cb).currentin un certo senso useMemo, "ricalcolerà il valore memorizzato solo quando una delle dipendenze è cambiata". Contro useRefche ricalcolano sempre il valore, non importa quale.

— Irasuna,

useRefnon ricalcola mai - restituisce sempre il valore iniziale.

— Izhaki,

Mentre è possibile utilizzare useRef per emulare useCallback o con una dipendenza vuota, non è possibile utilizzarlo per tutti i possibili scenari di useCallback che devono essere rimodificati quando una delle dipendenze cambia.

Inoltre, non farà molta differenza se si utilizza useCallback with empty dependencyo si utilizza Rif poiché non è necessario eseguire un confronto pesante.

Inoltre, se si modifica un po 'l'implementazione della funzione in modo che sia necessario ricrearla su una particolare modifica del parametro, è possibile semplicemente aggiornare l'implementazione con useCallbacke aggiungere il parametro aggiuntivo come dipendenza. Tuttavia, se lo si implementa con useRef, è necessario tornare auseCallback

— Shubham Khatri
fonte

Grazie. Come suggerisce il titolo, questo è un caso di dipendenze rigorosamente vuoto.

— Izhaki,

@Izaki Ho capito che la tua domanda è dipendenze strettamente vuote ed è per questo che ho detto che non c'è alcuna differenza in caso di dipendenza vuota. Ma è quando si tenta di aggiungere ulteriori modifiche, potrebbe essere necessario un po 'di refactoring

— Shubham Khatri,

Perché l'output di useRef (() => {...}). Current è modificabile.

Che può causare strani effetti collaterali nel tuo codice. Posso cambiare il valore della corrente in qualsiasi momento. https://codesandbox.io/s/confident-monad-vjeuw

Sarebbe il caso d'uso per non voler usare useRef

— Daniel Duong
fonte

Ma x = useRef(value).currentnon restituisce mai istanze mutabili - refnon viene mai restituito; currentè. È lo stesso della useCallbackversione.

— Izhaki,