- These are patterns that the child component would be rendred .
When the parent component is re-rendered, for example when updating the state of itself or so.
When the props of child component are re-rendered.
But actually, it is only needed when props are rendered to re-render the child component. Everything else is unnecessary.
・src/Example.js
mport React, { useState } from "react";
import Child from "./Child";
import "./Example.css";
const Example = () => {
console.log("Parent render");
const [countA, setCountA] = useState(0);
const [countB, setCountB] = useState(0);
return (
<div className="parent">
<div>
<h3>Parent Component</h3>
<div>
<button
onClick={() => {
setCountA((pre) => pre + 1);
}}
>
Button A
</button>
<span>Update the state of Parent Component</span>
</div>
<div>
<button
onClick={() => {
setCountB((pre) => pre + 1);
}}
>
Buton B
</button>
<span>Update the state of Child Component</span>
</div>
</div>
<div>
<p>The count of clicked：{countA}</p>
</div>
<Child countB={countB} />
</div>
);
};
export default Example;
・src/Child .js
const Child = ({ countB }) => {
console.log("%cChild render", "color: red;");
return (
<div className="child">
<h2>Child component</h2>
<span>The count of B button cliked：{countB}</span>
</div>
);
};
export default Child;
- In this case, when we press the A(Parent component) button, the child component is rendered. Even though it is unnecessary.
・Like this.
・src/Child .js (using a memo hook)
import { memo } from "react";
function areEqual(prevProps, nextProps) {
if (prevProps.countB !== nextProps.countB) {
return false; // re-rendered
} else {
return true; // not-re-rendred
}
}
const ChildMemo = memo(({ countB }) => {
console.log("%cChild render", "color: red;");
return (
<div className="child">
<h2>Child component</h2>
<span>The count of B button cliked：{countB}</span>
</div>
);
}, areEqual);
export default ChildMemo;
- If we use memo, we can avoid unnecessary re-rendering.
・Like this.
Top comments (0)