Por un capricho...🤔
Escribí el siguiente código
import React, { useRef } from 'react'; import { useHistory } from 'react-router-dom'; // Parent component const Example: React.FC = () => { // Case A: const packHistoryToRef = useRef<ReturnType<typeof useHistory>>(useHistory()); // Case B: const history = useHistory(); console.log(packHistoryToRef); // It works！😎 return ( [1, 2, 3, 4, 5].map(i => ( // Case A solution <Child history={packHistoryToRef} /> // Case B solution <Child history={history} /> )) ) } // Child component const Child = ({ history }) => { // Case A: Is `history` object point to the same memory address？ // Case B: There's five printouts here. Does that mean it's gonna repeat it five times？ console.log(history, 'history') }¿Es seguro para mí usarlo así?
De lo contrario, creo que este es el beneficio de hacer esto es
Puede useHistory puede usarse como un valor de useRef
Sí, puede almacenar cualquier valor que desee en una referencia de React.
La razón por la que useRef(useHistory()) es porque todavía sigue las reglas de los ganchos.
Seria equivalente a:
const history = useHistory(); const packHistoryToRef = useRef(history);Los ganchos se llaman en el mismo orden, incondicionalmente, en cada ciclo de renderizado.
Lo hace
Guardar memoria
Supongo que guarda una sola declaración de variable. No mucho mas.
Claro
Me parece lo suficientemente claro, o cualquier otra persona familiarizada con javascript, React y React hooks. Aunque, en general, es mejor ser más explícito con lo que está haciendo su código que tratar de ser "elegante".
Es muy útil en componentes secundarios (especialmente en ListItem)
No diría que es más útil que simplemente declarar explícitamente el objeto de history primero.
Sugeriría apegarse a escribir código que se lea más claramente, cada línea con un propósito específico.
const history = useHistory(); // (1) define history const historyRef = useRef(history); // (2) save ref// Parent component const Example: React.FC = () => { // Case A: const packHistoryToRef = useRef<ReturnType<typeof useHistory>>(useHistory()); // Case B: const history = useHistory(); console.log(packHistoryToRef); // It works！😎 return ( [1, 2, 3, 4, 5].map(i => ( // Case A solution <Child history={packHistoryToRef} /> // Case B solution <Child history={history} /> )) ) }
Como señalé en los comentarios, el objeto de history proporcionado por el useHistory ya es básicamente una referencia a una instancia de historial singular, por lo que almacenarlo en una referencia de React propia no proporciona ningún beneficio adicional. Simplemente pase el history de useHistory a los componentes secundarios.