「ReactのカスタムHooksをカジュアルに使う」という記事を読んでカジュアルに使ってみた
元ネタ
カスタムフックとは
カスタム Hook とは何かですが、公式(カスタムフックの抽出)によるとこんな感じの説明がされてます。
- カスタムフックとは、名前が ”use” で始まり、ほかのフックを呼び出せる JavaScript の関数のことです。
- 自分独自のフックを作成することで、コンポーネントからロジックを抽出して再利用可能な関数を作ることが可能です。
など、具体例とともに色々書いてあるのですが、僕は初見でみたとき何も分からなかったです。
超簡単にいうと、"use"から始まる関数ということだけ理解しました。
まだイメージが涌きづらいかなと思うので、簡単なカウンターの例から一緒にみていきます。
カウンターコンポーネントにカスタムフックを使って作ってみる
普通に書くと以下のようなコンポーネントが出来上がると思います。
普通に書く
const CounterComponent = () => {
const [count, setCount] = useState(0);
const addCount = () => {
//コンポーネント的にはsetCountの処理は別に必要ない
setCount((prev) => prev + 1);
};
return (
//必要な要素は画面に表示する{count}とonClickで発火する関数
<>
<Typography>{count}</Typography>
<Button onClick={addCount}>count up</Button>
</>
);
};
このコンポーネントが本当に必要なパーツは、カウントされて画面に表示される値と、クリックしたときの関数です。
なので、このコンポーネントは、新しくカウントをセットする setCount とカウントを増加させるという内部ロジックは不要と言えます。
今不要と言ったこのロジックを外に出し、隱蔽すると次のコードになる
カスタムフックにロジックを隱蔽
const CounterComponent = () => {
const { count, countUp } = useCounter();
return (
<>
<Typography>{count}</Typography>
<Button onClick={countUp}>count up</Button>
</>
);
};
//デフォルトは+1される
const useCounter = (increment = 1) => {
const [count, setCount] = useState(0);
const countUp = () => {
setCount((prev) => prev + increment);
};
return { count, countUp };
};
このようにすることで、「値を操作する hooks」と「その値をただ表示するだけのコンポーネント」と役割がはっきりするように見えます。
また、コードもスッキリするので気持ちもスッキリするといったところでしょうか))
カウンター以外の少し複雑な使い方は調べたら出てくるのでそちらを参考にしてください。
パフォーマンス
少し話がそれますが、これだけは頭に留めておいた方が良いことを以下に書きます。
カスタムフックはパフォーマンスの問題を引き起こしがち(らしい)ので、カスタムフックを作る際は常にuseMemo や useCallback の使用の検討をおすすめします。
このあたりの記事を読むと良いです。
カジュアルに使うモチベ
「React のカスタム Hooks をカジュアルに使う」に以下が書いてありました
- カスタム Hooks というと、どちらかというと React の中では難しい部類に入ります。主に「使い方がわからない」「公式ドキュメントが不親切」「ネットの解説が難しい」あたりが問題になるでしょう。しかし難しい機能だからと言って難しく使う必要はなく、自分の使える範囲で自由に使えばいいのではないかと思います。
- カスタム Hooks は一般にロジックの分離や再利用性の向上、テストの容易化などのために使われますが、実際にはもう少しカジュアルに使っても大丈夫です。難しいこと考えずにまずは「フックが増えすぎたからカスタム Hooks 導入してみよう」ぐらいの気持ちから始めて行きましょう。
- カスタム Hooks というと複雑な事情を備えた高度な機能だと捉えがちです。もちろん結合の緩和であるとか抽象的なインターフェイスの提供などに使うのが一番効果を発揮するのですが、まずはカジュアルに、ちょっとした処理をまとめるところから始めてみませんか？
この記事を読む前までは食わず嫌いのように勝手に難しく考えすぎて使うのを躊躇してました。
しかし、ここに書いてある通り難しいことは考えずまずはカウンター程度の hooks から切り出すことから始めると少しずつ理解出来てきます。
実際、カスタムフックを作ろうとすることで、ロジックの細分化を自然と考えるようになったことが個人的に良かったです。
カジュアルに、ちょっとした処理をまとめるところから始めてみませんか？
と言われたのでカジュアルに作った例を 2 つ紹介します
実際にカスタムフックを作ってみた
画面サイズを動的に取得する Hook
/**
* 画面サイズを動的に取得する
*/
export const useWindowSize = () => {
const ref = useRef<NodeJS.Timeout | number>();
const delay = 500;
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);
const updateSize = useCallback(() => {
clearTimeout(Number(ref.current));
ref.current = setTimeout(() => {
//When resizing the screen on the desktop, a delay of 500 ms is provided
//because the setState event is fired every time.
setWidth(window.innerWidth);
setHeight(window.innerHeight);
}, delay);
}, []);
useLayoutEffect(() => {
window.addEventListener("resize", updateSize);
updateSize();
return () => window.removeEventListener("resize", updateSize);
}, [updateSize]);
return { width, height };
};
ページタイトルを変更する Hook
前提
- 各ページでページタイトルが異なる
- pageTitle は redux で管理されている。
hooks を作らずに書くと
const ComponentA = () => {
const dispatch = useAppDispatch();
useEffect(() => {
dispatch(setPageTitle("ComponentAのページ"));
}, [dispatch]);
return <div>A</div>;
};
const ComponentB = () => {
const dispatch = useAppDispatch();
useEffect(() => {
dispatch(setPageTitle("ComponentBのページ"));
}, [dispatch]);
return <div>B</div>;
};
↑ 各コンポーネントで useEffect や dispatch を呼び出すのは無駄な処理と言える。
Hooks に切り出すと
export const usePageTitle = (title = "") => {
const dispatch = useAppDispatch(); //reduxのreducer
useEffect(() => {
dispatch(setPageTitle(title));
}, [title, dispatch]);
};
const ComponentA = () => {
usePageTitle("ComponentAのページ");
return <div>A</div>;
};
const ComponentB = () => {
usePageTitle("ComponentBのページ");
return <div>B</div>;
};
Discussion