おすすめ自作 React hooks集1 (useBooleanState)

おすすめ自作 React hooks集1

• おすすめ自作 React hooks集2
• おすすめ自作 React hooks集3
• おすすめ自作 React hooks集4

公式ドキュメントへのリンク

• React hooks API
• カスタムフックの作成

useBooleanState

ダイアログの開閉状態などのbooleanのstateを書くのに、毎回無駄に長い同様の処理を書いていたのでまとめたもの。
超簡単だけどあると便利。

import { useState, useCallback } from 'react';

export const useBooleanState = (
  init: boolean
): [boolean, () => void, () => void] => {
  const [state, setState] = useState<boolean>(init);

  const setTrue = useCallback(() => {
    setState(true);
  }, []);

  const setFalse = useCallback(() => {
    setState(false);
  }, []);

  return [state, setTrue, setFalse];
}

使用例

import { Dialog } from "somewhere";

export const MyComponent = () => {
  const [dialogIsOpen, open, close] = useBooleanState(false);

  return (
    <div>
      <Dialog open={dialogIsOpen} onClose={close} />
      <button onClick={open}>Open Dialog!</button>
    </div>
  )
}

使用前

import { Dialog } from "somewhere";

export const MyComponent = () => {
  const [dialogIsOpen, setDialogIsOpen] = useState<boolean>(false);
  
  const open = useCallback(() => {
    setDialogIsOpen(true);
  }, []);

  const close = useCallback(() => {
    setDialogIsOpen(false);
  }, []);

  return (
    <div>
      <Dialog open={dialogIsOpen} onClose={close} />
      <button onClick={open}>Open Dialog!</button>
    </div>
  )
}

---

おすすめ自作 React hooks集は随時追加予定です。