#author("2022-09-02T07:10:12+09:00","default:ryuichi","ryuichi")
#author("2022-09-02T07:11:34+09:00","default:ryuichi","ryuichi")
* React.memo [#m0c9525d]
import { useState, memo } from "react";
function areEqual(prevProps, nextProps) {
return prevProps.x === nextProps.x;
}
const Foo = memo(({ x, y }) => {
console.log("Foo", x, y);
return <div>Foo</div>;
});
const Boo = memo(({ x, y }) => {
console.log("Boo", x, y);
return <div>Boo</div>;
}, areEqual);
function App() {
console.log("App");
const [count, setCount] = useState(0);
return (
<div className="App">
<p>
<button type="button" onClick={() => setCount((count) => count + 1)}>
count is: {count}
</button>
</p>
<Foo />
<Foo x={count} />
<Foo x={new Date()} />
<Foo x={999} y={new Date()} />
<Boo x={count} />
<Boo x={new Date()} />
<Boo x={999} y={new Date()} />
</div>
);
}
export default App;
** 対象のコンポーネント [#d110ac48]
- Fooコンポーネントのmemo化（第2引数なし）
- Booコンポーネントのmemo化（第2引数あり）
** renderされるタイミング [#t31dd6ef]
*** 初回表示（Appコンポーネントのマウント時） [#rfc18c8d]
-すべてのFooとBooはrenderされる
*** ボタン押下してcountが更新、Appコンポーネントがre-renderされた時 [#sc83cd19]
- '''<Foo />''' re-renderされない
- '''<Foo />''' re-renderされない（xもyもundefinedのままだから）
- '''<Foo x={count} />''' re-renderされる
- '''<Foo x={new Date()} />''' re-renderされる
- '''<Foo x={999} y={new Date()} />''' re-renderされる
- '''<Boo x={count} />''' re-renderされる
- '''<Boo x={new Date()} />''' re-renderされる
- '''<Boo x={999} y={new Date()} />''' re-renderされない
- '''<Boo x={999} y={new Date()} />''' re-renderされない（yは新しい日時になったが、第2引数でxだけ評価するように指定してるので）
*** console: [#e8678952]
App
Foo undefined undefined
Foo 0 undefined
Foo Fri Sep 02 2022 07:02:56 GMT+0900 (日本標準時) undefined
Foo 999 Fri Sep 02 2022 07:02:56 GMT+0900 (日本標準時)
Boo 0 undefined
Boo Fri Sep 02 2022 07:02:56 GMT+0900 (日本標準時) undefined
Boo 999 Fri Sep 02 2022 07:02:56 GMT+0900 (日本標準時)
App
Foo 1 undefined
Foo Fri Sep 02 2022 07:02:58 GMT+0900 (日本標準時) undefined
Foo 999 Fri Sep 02 2022 07:02:58 GMT+0900 (日本標準時)
Boo 1 undefined
Boo Fri Sep 02 2022 07:02:58 GMT+0900 (日本標準時) undefined
