Veo otra pregunta sobre useState + useEffect . pero me pregunto cuál es la diferencia para la variable sin cambios (const) en las dos implementaciones:
function optionA(){ const [Mesh] = useState(()=> new Mesh) return "...someRender" } function optionB(){ const Mesh = useMemo(()=> new Mesh) return "...someRender" }Editado:
Sé que useRef(someValue) es más adecuado para eso, pero me parece "no declarativo" escribir Mesh.current cualquier lugar
El bit clave está donde dijiste "sin cambios". No tiene sentido tener un valor en el estado que nunca cambia. El propósito del estado es contener información que, cuando se cambia , provocará una actualización de la representación. Si nunca lo cambias, no hay razón para ponerlo en estado.
Pero , no uses useMemo para esto. De la documentación:
Puede confiar en useMemo como una optimización del rendimiento, no como una garantía semántica. En el futuro, React puede optar por "olvidar" algunos valores previamente memorizados y volver a calcularlos en el próximo renderizado, por ejemplo, para liberar memoria para componentes fuera de pantalla. Escriba su código para que siga funcionando sin
useMemo, y luego agréguelo para optimizar el rendimiento.
(su énfasis)
Si tiene información que desea mantener estática durante toda la vida útil de su componente, use useRef , no useMemo :
function Example() { const refMesh = useRef(null); if (!refMesh.current) { // One-time initialization refMesh.current = new Mesh(); } const mesh = refMesh.current; // ...use `mesh` from here on out... } A diferencia de useMemo , puede estar seguro de que solo se crea una única instancia de Mesh durante el ciclo de vida del componente. (Esto también tiene la otra pequeña ventaja de que no está creando constantemente una función para pasar useMemo en cada renderizado).
A veces utilizo una única referencia que almacena un objeto para contener varias piezas de información de instancia que no es apropiada para el estado (incluidas funciones de devolución de llamada estables para componentes secundarios). Es bastante útil.
Re su edición:
Sé que
useRef(someValue)es más adecuado para eso, pero me parece "no declarativo" escribirMesh.currentcualquier lugar
tu no Ver const mesh = refMesh.current; arriba, usaría mesh , no refMesh.current , en el resto del componente.
Si encuentra el if incómodo, puede envolverlo en un gancho que proporcione la garantía semántica que useMemo no proporciona, a costa de crear una función en cada renderizado (como con useMemo , useCallback , etc.):
const useData = (instanceInitializer) => { const ref = useRef(null); if (!ref.current) { ref.current = instanceInitializer(); } return ref.current; };Entonces sería:
function Example() { const mesh = useData(() => new Mesh()); // ...use `mesh` from here on out... }Eso tiene el (muy) leve costo adicional de la creación de funciones, pero una mejor ergonomía.