Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

165
Views
React.useMemo frente a React.useState

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

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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" escribir Mesh.current cualquier 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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!