A Readable useToggle

useState(false) gives you setValue, so every call site ends up spelling out setValue(true), setValue(false), setValue(v => !v). Wrap it once instead, and the intent - on, off, toggle - moves to the call site. The setters and the object holding them stay stable across renders, so they pass cleanly as props or effect deps.

@itsnas panel.tsx

codepanel.tsx

'use client'
 
function AdvancedPanel() {
  // @src/code/use-toggle
  const [isOpen, panel] = useToggle()
 
  // panel.off keeps one identity across renders, so it's an honest
  // effect dep: this runs when isOpen flips, not on every render.
  useEffect(() => {
    if (!isOpen) return
 
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') panel.off()
    }
 
    document.addEventListener('keydown', onKey)
    return () => document.removeEventListener('keydown', onKey)
  }, [isOpen, panel.off])
 
  return (
    <>
      <button onClick={panel.toggle} aria-expanded={isOpen}>
        Advanced settings
      </button>
 
      {isOpen && <fieldset>{/* … */}</fieldset>}
    </>
  )
}

main

Nas (@itsnas)

'use client'
 
interface UseToggleControls {
  on: () => void
  off: () => void
  toggle: () => void
}
 
/**
 * A boolean useState with named setters instead of a raw one:
 * `on`/`off`/`toggle` read as intent at the call site instead of
 * `setValue(true)`/`setValue(false)`/`setValue(v => !v)`. Both the
 * individual functions and the controls object itself are
 * referentially stable across renders, so passing them as props or
 * effect dependencies doesn't retrigger anything downstream.
 */
export function useToggle(
  initialValue = false,
): [boolean, UseToggleControls] {
  const [value, setValue] = useState(initialValue)
 
  const on = useCallback(() => setValue(true), [])
  const off = useCallback(() => setValue(false), [])
  const toggle = useCallback(() => setValue(v => !v), [])
 
  const controls = useMemo(
    () => ({ on, off, toggle }),
    [on, off, toggle],
  )
 
  return [value, controls]
}

main

Nas (@itsnas)