0
286
VistasEvitar que la variable se restablezca al usar el estado - Reaccionar
Digamos que tenemos una variable que no debe cambiarse con el renderizado de reacción. ¿Es esto posible?, sin tener que usar un contexto o elevar la variable a una jerarquía en los componentes.
import React, {useState,useMemo,useRef} from 'react' const Component=()=>{ const [state,setState] = useState(false) const ref = useRef(null) let previous = 0 function increment(){ previous++ ref.current.innerHTML = `VARIABLE: ${previous}` } return ( <div> <div ref={ref}>VARIABLE: {previous}</div> <div> <button onClick={increment}>Incremente Let</button> <button onClick={()=>{setState(!state)}}>Change State</button> </div> </div> ) } export default Component 
Sé que también puedo usar el estado , pero veamos que actualizar la variable activará nuevos renderizados, pero no es necesario renderizar la variable, así que ¿por qué un estado? Este código es solo un ejemplo.
Este ejemplo es una demostración del problema, no una implementación real.
2 Respuestas
Responde la pregunta0
Podrías usar useRef . El valor persistirá en las representaciones y los cambios no activarán las representaciones.
const previous = useRef(0); function increment(){ previous.current++; }Dado que modificarlo no activará una nueva representación, debe asegurarse de no representar el valor.
0
Debe usar una variable de estado para previous en lugar de solo una variable simple. De lo contrario, si no tiene estado, la variable siempre se restablecerá al volver a renderizar.
Además, no es necesario actualizar el innerHTML a través de la referencia en este caso, ya que la variable ya se está procesando.
//... const [previous, setPrevious] = useState(0) function increment(){ setPrevious(previous + 1) } //...