Nota de reacción
El uso memohará que React omita la representación de un componente si sus accesorios no han cambiado.
Esto puede mejorar el rendimiento.
Esta sección utiliza React Hooks. Consulte la sección React Hooks para obtener más información sobre los Hooks.
Problema
En este ejemplo, el Todoscomponente se vuelve a renderizar incluso cuando todos no han cambiado.
Ejemplo:
index.js:
import { useState } from "react";
import ReactDOM from "react-dom";
import Todos from "./Todos";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState(["todo 1", "todo 2"]);
const increment = () => {
setCount((c) => c + 1);
};
return (
<>
<Todos todos={todos} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
Todos.js:
const Todos = ({ todos }) => {
console.log("child render");
return (
<>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</>
);
};
export default Todos;
Cuando hace clic en el botón de incremento, el Todoscomponente se vuelve a renderizar.
Si este componente fuera complejo, podría causar problemas de rendimiento.
¡Obtener la certificación!
$95 INSCRÍBETE
Solución
Para arreglar esto, podemos usar memo.
Úselo memopara evitar que el Todoscomponente se vuelva a renderizar innecesariamente.
Envuelva la Todosexportación del componente en memo:
Ejemplo:
index.js:
import { useState } from "react";
import ReactDOM from "react-dom";
import Todos from "./Todos";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState(["todo 1", "todo 2"]);
const increment = () => {
setCount((c) => c + 1);
};
return (
<>
<Todos todos={todos} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
Todos.js:
import { memo } from "react";
const Todos = ({ todos }) => {
console.log("child render");
return (
<>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</>
);
};
export default memo(Todos);
Ahora el Todoscomponente solo se vuelve a renderizar cuando todosse actualizan los elementos que se le pasan a través de accesorios.