Custom hooks for stateCustom hooks for state

Three toggles, one hook

Flip each toggle and watch which lines own it.

const [sidebar, setSidebar] = useState(false)const toggleSidebar = useCallback(() => {  setSidebar(v => !v)}, []) const [dark, setDark] = useState(false)const toggleDark = useCallback(() => {  setDark(v => !v)}, []) const [details, setDetails] = useState(false)const toggleDetails = useCallback(() => {  setDetails(v => !v)}, [])

const [sidebar, toggleSidebar] = useToggle()const [dark, toggleDark] = useToggle()const [details, toggleDetails] = useToggle()

export function useToggle(initialValue = false): [boolean, () => void] {
  const [value, setValue] = useState(initialValue)

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

  return [value, toggle]
}

Toggle twice in one click

Set calls per click, then press Run.

const toggleBad = () => setValue(!value)
const toggle = useCallback(() => setValue(v => !v), [])

Stable callbacks skip renders

Type in the box, then press each child's button.

const MemoChild = React.memo(function Child({ onToggle }: { onToggle: () => void }) {
  return <button onClick={onToggle}>Toggle</button>
})

function Parent() {
  const [query, setQuery] = useState('')
  const [isOpen, toggleOpen] = useToggle()
  return (
    <>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <MemoChild onToggle={toggleOpen} />
    </>
  )
}

Why it matters, pros and cons