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オブジェクトの型を見てブラウザかどうかを判定している