React HooksのuseMemo,useEffectの動きを確認する
React Hooksの動きを確認する
便利だから何となくhooksを使っているという状況なので、実際の動きを確認してみることにしました。
検証用ソースコード
プログラム自体は単純で、チェックボックスを表示するだけのプログラムです。
チェックボックスを押してコンポーネントが再評価される際に、どういう動きをするのかという確認です。
import React, { useMemo, useEffect, useState } from "react";
import * as ReactDOM from "react-dom";
function App() {
console.log("Function Start");
useMemo(() => {
console.log("Memo");
}, []);
//パラメータ有りuseEffect
useEffect(() => {
console.log("Effect[] Start");
return () => {
console.log("Effect[] End");
};
}, []);
//パラメータ無しuseEffect
useEffect(() => {
console.log("Effect Start");
return () => {
console.log("Effect End");
};
});
const [checked, setChecked] = useState(false);
console.log("Function End");
return (
<>
<input
type="checkbox"
checked={checked}
onChange={e => {
console.log("Check");
setChecked(e.target.checked);
}}
/>
</>
);
}
ReactDOM.render(<App />, document.getElementById("root") as HTMLElement);
検証結果
ページ表示直後
Function Start
Memo
Function End
Effect[] Start
Effect Startチェックボックスを押した後
Function Start
Function End
Effect End
Effect Start
所感
useMemoは作成直後に一回だけ呼ばれるため、本来の使い方ではありませんが、classコンポーネント移植時、コンストラクタでやっていた処理の代替で使えそうです。
また、実際にやってみてよく分かっていなかったのは「Effect End」のタイミングです。前回のEffectを終了させてから再び開始されます。表示中の処理を行う箇所なのだから、確かにその動作が適切なわけです。
hooksを使うと小さなコンポーネントを作る場合は、非常に手軽に使えるので重宝します。しかし重量級のコンポーネントの作成などは、classを使ってstateやプロパティを定義した方が使いやすい場合もあります。今後も適材適所でバランス良く使っていこうと思います。
Author And Source
この問題について(React HooksのuseMemo,useEffectの動きを確認する), 我々は、より多くの情報をここで見つけました https://qiita.com/SoraKumo/items/f0caa16ffc6089829450著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .