筋肉チョットデキル

アリババのカスタムフックコードリーディング~useBoolean編~

2020年07月16日

ReactHooks

アリババのカスタムフックをコードリーディング

React の理解を深めるために、アリババのカスタムフックのコードを読んでいこうと思います!

カスタムフックとはuseから始まりほかのフックを呼び出せる関数です。
自分独自のフックを作成することで、コンポーネントから React のロジックを抽出して再利用可能な関数を作ることが可能です!

OSS として多くのカスタムフックが公開されているなかでアリババを選んだ理由は、
わかりやすいドキュメントが用意されていること、有名企業であること、GitHub の Star 数が多いことがあります。

useBoolean フック

useBooleanは、true/falseの値を state 管理する hooks です。

前回ご紹介したuseToggleが管理してくれた値の型はnumber | string | booleanでしたが、
useBooleanbooleanのみで、より限定された hooks になります。

React
Hooks

2020年07月15日

アリババのカスタムフックをコードリーディング React の理解を深めるために、アリババのカスタムフックのコードを読んでいこうと思います! カスタムフックとは use…

API

const [ state, { toggle, setTrue, setFalse }] = useBoolean(
defaultValue?: boolean,
);

引数

PropertyDescriptionTypeDefault
defaultValueデフォルト値を設定(任意)boolean | undefinedfalse

戻り値

PropertyDescriptionType
statestate の値boolean
actionsstate の値を更新する関数たちobject

戻り値の関数たち

PropertyDescriptionType
togglestate の値をトグルする(value?: any) => void
setTruestate に true をセット() => void
setFalsestate に false をセット() => void

Usage

Effects:true

function Demo() {
const [state, { toggle, setTrue, setFalse }] = useBoolean(true);
return (
<div>
<p>Effects:{JSON.stringify(state)}</p>
<Stack isInline spacing='2'>
<Button onClick={() => toggle()}>Toggle</Button>
<Button onClick={setFalse}>Set false</Button>
<Button onClick={setTrue}>Set true</Button>
</Stack>
</div>
);
}

👀

ホントにいろんなところで使いそう!!

Let’s コードリーディング!!!!

useBooleanがどんなカスタムフックか分かったので、どんな実装になっているかコードを読んでいきます!

🙌

ここからが本命!実装を読めば自分でも良いカスタムフックを作れちゃうはず!

全体像

hooks/blob/master/packages/hooks/src/useBoolean/index.ts
import { useMemo } from 'react';
import useToggle from '../useToggle';
export interface Actions {
setTrue: () => void;
setFalse: () => void;
toggle: (value?: boolean | undefined) => void;
}
export default function useBoolean(defaultValue = false): [boolean, Actions] {
const [state, { toggle }] = useToggle(defaultValue);
const actions: Actions = useMemo(() => {
const setTrue = () => toggle(true);
const setFalse = () => toggle(false);
return { toggle, setTrue, setFalse };
}, [toggle]);
return [state, actions];
}
GitHub

考察

わりとシンプルな実装で、
stateactionsを配列で返している。

return [state, actions];

stateはboolean型で初期値はdefaultValue
toggle関数によって状態が変わる。
(toggle関数の詳細はusetoggleについてのブログ記事を参照)

const [state, { toggle }] = useToggle(defaultValue);

actionsは3つの関数が値のオブジェクトで、
それぞれ

  • stateの値をtrue⇔falseに切り替える関数
  • stateの値をtrueにする関数
  • stateの値をfalseにする関数

という関数である。
ちなみに、メモ化されていてtoggleに変更があると再評価される。

const actions: Actions = useMemo(() => {
const setTrue = () => toggle(true);
const setFalse = () => toggle(false);
return { toggle, setTrue, setFalse };
}, [toggle]);

まとめ

このフックスをもとに、ホバー中であるかとかクリックしたかどうかとかのフックスを作れそう!

ほかのフックスも引き続き読んで学ぶ!!


岡本 侑貴@筋肉チョットデキル

筋肉バカ。筋トレしてコード書いて、毎日幸せに生きてる。ボディビルにドハマリ。2021年東京オープンボディビル選手権で最高の身体に仕上げてつよつよエンジニアになる!!

Made with Gatsby& ChakraUi

Yuuki Okamoto • 2020