Tengo dos componentes funcionales React: C1 y C2 . C2 está anidado dentro de C1 :
const C2 = () => { console.log("C2 Render"); return ( <div>I am Component 2</div> ); }; const C1 = () => { const [text, setText] = useState("Hello"); const MC2 = React.memo(C2, () => true); return ( <div className="box"> <h1>The Button</h1> <button onClick={() => { setText(`${text} b`); }} className="button"> Click me </button> <div> {text} </div> <MC2 /> </div> ); }CodePen aquí .
Sé que un componente se vuelve a renderizar en diferentes situaciones. Entre ellos está el que el padre vuelve a renderizar.
Es por eso que estoy usando un componente memorizado alrededor de C2 . Pero aún puedo ver la consola mostrando "C2 Render" cada vez que hago clic en el botón.
¿Por qué?
C1 se vuelve a procesar debido a un cambio de estado, por lo que su componente memorizado se vuelve a declarar cada vez. simplemente envuelva C2 en un React.memo() y no verá las representaciones
const MC2 = React.memo(() => { console.log("C2 Render"); return ( <div>I am Component 2</div> ); }, () => true);o si desea memorizar solo un caso de uso, colóquelo fuera del componente C1 y tenga ese componente memorizado:
const C2 = () => { console.log("C2 Render"); return ( <div>I am Component 2</div> ); }; const MC2 = React.memo(C2, () => true);& lo usé así:
const C1 = () => { const [text, setText] = useState("Hello"); return ( <div className="box"> <h1>The Button</h1> <button onClick={() => { setText(`${text} b`); }} className="button"> Click me </button> <div> {text} </div> <MC2 /> </div> ); }