Me gustaría poder establecer condicionalmente un estado basado en cambios de estado anteriores con React Hooks. Pero si el estado sigue siendo el mismo, el componente no debería volver a renderizarse.
Al usar componentes de clase, pude lograr esto usando:
this.setState(prevState => { if(prevState.value !== true) { return { value: true } } return null }) El código anterior establece el estado en true , solo si no es true . Sin embargo, si ya es true , el componente no se vuelve a representar . Me gustaría lograr el mismo efecto con React Hooks.
Sé que con React Hooks, puedo usar el prevState así:
setValue(prevValue => { // some code return newValue }) Sin embargo, no sé cómo evitar volver a renderizar si el estado sigue siendo el mismo. ¿Es posible para mí evitar el renderizado después de usar React Hooks prevState ? Gracias por su preocupación.
Dos caminos:
Envuelva su componente por memo
import { useEffect, useState, memo } from "react"; const App = () => { const [test, setTest] = useState(false); useEffect(() => { console.log("re-rendered"); }); const setTestToTrue = () => { setTest((v) => { if (v !== true) return true; return v; }); }; return ( <div className="App"> <button onClick={setTestToTrue}>Set test to true</button> </div> ); }; export default memo(App);