Open2

usehooks-ts(https://usehooks-ts.com/)を読む

かみおかみお

useBoolean

使い方

import { useBoolean } from 'usehooks-ts'

export default function Component() {
  const { value, setValue, setTrue, setFalse, toggle } = useBoolean(false)

  // Just an example to use "setValue"
  const customToggle = () => {
    setValue((x: boolean) => !x)
  }

  return (
    <>
      <p>
        Value is <code>{value.toString()}</code>
      </p>
      <button onClick={setTrue}>set true</button>
      <button onClick={setFalse}>set false</button>
      <button onClick={toggle}>toggle</button>
      <button onClick={customToggle}>custom toggle</button>
    </>
  )
}

実装

import { useCallback, useState } from 'react'

import type { Dispatch, SetStateAction } from 'react'

interface UseBooleanOutput {
  value: boolean
  setValue: Dispatch<SetStateAction<boolean>>
  setTrue: () => void
  setFalse: () => void
  toggle: () => void
}

/**
 * Custom hook for handling boolean state with useful utility functions.
 * @param {boolean} [defaultValue] - The initial value for the boolean state (default is `false`).
 * @returns {UseBooleanOutput} An object containing the boolean state value and utility functions to manipulate the state.
 * @property {boolean} value - The current boolean state value.
 * @property {Function} setValue - Function to set the boolean state directly.
 * @property {Function} setTrue - Function to set the boolean state to `true`.
 * @property {Function} setFalse - Function to set the boolean state to `false`.
 * @property {Function} toggle - Function to toggle the boolean state.
 * @see [Documentation](https://usehooks-ts.com/react-hook/use-boolean)
 * @example
 * const { value, setTrue, setFalse, toggle } = useBoolean(true);
 *
 * console.log(value); // true
 * setFalse();
 * console.log(value); // false
 * toggle();
 * console.log(value); // true
 */
export function useBoolean(defaultValue?: boolean): UseBooleanOutput {
  const [value, setValue] = useState(!!defaultValue)

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

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

  const toggle = useCallback(() => {
    setValue(x => !x)
  }, [])

  return { value, setValue, setTrue, setFalse, toggle }
}
  • booleanのstateを扱うhooks
  • 引数のvalueの初期値を受け取る
  • valueをtrueとfalseに更新する関数と、true ⇔ falseを切り替える関数を返す
  • setValueは何故返す必要があるのかよくわからない(setTrue, setFalse, toggleで良いのでは)
かみおかみお

useIsomorphicLayoutEffect

使い方

import { useIsomorphicLayoutEffect } from 'usehooks-ts'

export default function Component() {
  useIsomorphicLayoutEffect(() => {
    console.log(
      "In the browser, I'm an `useLayoutEffect`, but in SSR, I'm an `useEffect`.",
    )
  }, [])

  return <p>Hello, world</p>
}

実装

import { useEffect, useLayoutEffect } from 'react'

/**
 * Custom hook for using either `useLayoutEffect` or `useEffect` based on the environment (client-side or server-side).
 * @param {Function} effect - The effect function to be executed.
 * @param {Array<any>} [dependencies] - An array of dependencies for the effect (optional).
 * @see [Documentation](https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect)
 * @example
 * useIsomorphicLayoutEffect(() => {
 *   // Code to be executed during the layout phase on the client side
 * }, [dependency1, dependency2]);
 */
export const useIsomorphicLayoutEffect =
  typeof window !== 'undefined' ? useLayoutEffect : useEffect
  • useLayoutEffectはブラウザで実行する(サーバーではなく)ことに意味があるため、サーバーで呼び出される場合はuseEffectを実行するように変更するためのhooks
  • windowオブジェクトの型を見てブラウザかどうかを判定している