Quiero actualizar solo un elemento cuando uso setState en una función
import { useState } from "react"; export default function App(){ const [state, setState] = useState("foo"); return( <Component1/> <Component2/> <Component3/> ); }Necesito alguna forma de actualizar uno de esos elementos, pero no todos.
En componentes funcionales, puede envolver su componente con React.memo . De esta forma, React memorizará la estructura del componente y en el siguiente render, si los accesorios siguen siendo los mismos, React no renderiza de nuevo y usa el memorizado. Para obtener más información, https://reactjs.org/docs/react-api.html#reactmemo
Básicamente envuelve con React.memo. Debajo del código, cuando cambia el estado 1, el recuento de procesamiento de Component2 no aumentará porque sus accesorios permanecen iguales. Pero cuando cambia state2, ambos se renderizarán.
export const Component2 = React.memo(({ state2 }) => { const renderCount = useRef(0); renderCount.current = renderCount.current + 1; return ( <div style={{ margin: 10 }}> Component2(with React.memo): <b>Rendered:</b> {renderCount.current} times,{" "} <b>State2:</b> {state2} </div> ); }); export default function App() { const [state1, setState1] = useState(1); const [state2, setState2] = useState(1); return ( <div className="App"> <div onClick={() => setState1((state) => state + 1)}> Click to change state1 </div> <div onClick={() => setState2((state) => state + 1)}> Click to change state2 </div> <Component1 state1={state1} /> <Component2 state2={state2} /> </div> ); }Creé una caja de arena para que juegues. Haga clic en los botones y vea React.memo en acción. https://codesandbox.io/s/xenodochial-sound-gug2x?file=/src/App.js:872-1753
Además, con Class Components, puede usar PureComponents para el mismo propósito. https://reactjs.org/docs/react-api.html#reactpurecomponent