React Tutorials
React Introduction
React Get Started
React Render HTML
React JSX
React Components
React Class
React Props
React Events
React Conditionals
React Lists
React Forms
React Router
React Memo
React CSS Styling
React Sass Styling
React ES6
React ES6
ES6 Classes
ES6 Arrow Functions
ES6 Variables
ES6 Array Methods
ES6 Destructing
ES6 Spread Operator
ES6 Modules
ES6 Ternary Operator
React Hooks
What is Hook?
useState
useContext
useRef
useReducer
useCallback
useMemo
Custom Hooks
Previous
React Memo
Using the memo will cause React to skip sharing a portion if its props have not changed.
This can improve performance.
This section uses React Hooks. See the React Hooks section for more information on Hooks.
Problem
In this example, part of the Todos also gives even when the todos have not changed.
Example
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;
When you click the add button, the Todos section also offers.
If this part were complicated, it could cause performance problems.
Solution
To fix this, we can use a memo.
Use the memo part of the Todos for redundant unnecessary.
Wrap a Todos segment post on the memo:
Example
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);
Now part of Todos re-offers only when todos are passed on to it with props being updated.