Reagir memorando
Usar memo
fará com que o React pule a renderização de um componente se suas props não forem alteradas.
Isso pode melhorar o desempenho.
Esta seção usa React Hooks. Consulte a seção React Hooks para obter mais informações sobre Hooks.
Problema
Neste exemplo, o Todos
componente é renderizado novamente mesmo quando os todos não foram alterados.
Exemplo:
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;
Quando você clica no botão de incremento, o Todos
componente é renderizado novamente.
Se esse componente for complexo, poderá causar problemas de desempenho.
Obter certificação!
$ 95 INSCRIÇÃO
Solução
Para corrigir isso, podemos usar memo
.
Use memo
para evitar que o Todos
componente seja renderizado desnecessariamente.
Envolva a Todos
exportação do componente em memo
:
Exemplo:
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);
Agora o Todos
componente só é renderizado novamente quando os todos
que são passados para ele por meio de props são atualizados.