useBoolean

useBoolean — вспомогательный хук библиотеки Chakra UI, предназначенный для удобного управления логическими значениями (true / false). Он упрощает работу со состояниями, которые имеют бинарную природу: открыто/закрыто, активно/неактивно, включено/выключено.

Во многих интерфейсах требуется переключать флаги состояния: модальные окна, боковые панели, всплывающие элементы, состояния загрузки, отображение дополнительных блоков интерфейса. Обычная реализация через useState требует писать вспомогательные функции для изменения значения. useBoolean решает эту задачу, предоставляя готовый набор методов управления состоянием.

Хук входит в пакет @chakra-ui/react и использует стандартный механизм React Hooks.

Импорт хука

import { useBoolean } from "@chakra-ui/react"

Хук доступен сразу после установки Chakra UI, отдельной установки не требуется.

Базовый синтаксис

const [value, setValue] = useBoolean(initialState)

Параметры:

initialState — начальное логическое значение (true или false)

Возвращаемые значения:

value — текущее состояние
setValue — объект с функциями управления состоянием

Методы управления состоянием

Объект управления содержит несколько методов:

Метод	Назначение
`on`	устанавливает значение `true`
`off`	устанавливает значение `false`
`toggle`	переключает состояние
`set`	устанавливает конкретное значение

Простое использование

import { Button } from "@chakra-ui/react"
import { useBoolean } from "@chakra-ui/react"

function Example() {
  const [isOpen, setIsOpen] = useBoolean()

  return (
    <>
      <Button onCl ick={setIsOpen.toggle}>
        Toggle
      </Button>

      {isOpen && <div>Контент отображается</div>}
    </>
  )
}

В этом примере:

состояние isOpen хранит логическое значение
метод toggle переключает его между true и false

Начальное значение

По умолчанию состояние равно false, но можно задать начальное значение.

const [isVisible, setIsVisible] = useBoolean(true)

Теперь компонент начинает работу с состоянием true.

Методы `on` и `off`

Иногда необходимо не переключать состояние, а явно устанавливать значение.

function Example() {
  const [isOpen, setIsOpen] = useBoolean()

  return (
    <>
      <Button onCl ick={setIsOpen.on}>
        Открыть
      </Button>

      <Button onCl ick={setIsOpen.off}>
        Закрыть
      </Button>
    </>
  )
}

Преимущества:

читаемый код
отсутствие необходимости писать собственные обработчики

Метод `toggle`

toggle — самый часто используемый метод.

setIsOpen.toggle()

Он автоматически меняет значение:

true  → false
false → true

Используется в интерфейсах:

кнопки раскрытия
переключатели
аккордеоны
модальные окна

Метод `set`

Позволяет установить конкретное значение.

setIsOpen.set(true)
setIsOpen.set(false)

Пример:

function Example() {
  const [loading, setLoading] = useBoolean()

  const startLoading = () => {
    setLoading.set(true)
  }

  const stopLoading = () => {
    setLoading.set(false)
  }

  return (
    <div>
      {loading && <p>Загрузка...</p>}
    </div>
  )
}

Сравнение с `useState`

Стандартный подход React:

const [isOpen, setIsOpen] = useState(false)

const open = () => setIsOpen(true)
const close = () => setIsOpen(false)
const toggle = () => setIsOpen(prev => !prev)

Использование useBoolean:

const [isOpen, setIsOpen] = useBoolean()

Доступные методы:

setIsOpen.on()
setIsOpen.off()
setIsOpen.toggle()

Преимущества:

меньше кода
более понятная семантика
отсутствие дублирования функций
стандартизированное управление boolean-состояниями

Управление модальным окном

Типичный сценарий использования — управление модальными окнами.

import {
  Button,
  Modal,
  ModalOverlay,
  ModalContent,
  useBoolean
} from "@chakra-ui/react"

function ModalExample() {
  const [isOpen, setIsOpen] = useBoolean()

  return (
    <>
      <Button onCl ick={setIsOpen.on}>
        Открыть модальное окно
      </Button>

      <Modal isOpen={isOpen} onCl ose={setIsOpen.off}>
        <ModalOverlay />
        <ModalContent>
          Контент модального окна
        </ModalContent>
      </Modal>
    </>
  )
}

Здесь:

setIsOpen.on открывает модальное окно
setIsOpen.off закрывает его

Управление видимостью элемента

Хук часто используется для отображения и скрытия элементов интерфейса.

function ToggleContent() {
  const [visible, setVisible] = useBoolean()

  return (
    <>
      <Button onCl ick={setVisible.toggle}>
        Показать / скрыть
      </Button>

      {visible && (
        <div>
          Дополнительная информация
        </div>
      )}
    </>
  )
}

Управление состоянием загрузки

function LoadingExample() {
  const [loading, setLoading] = useBoolean()

  const fetchData = async () => {
    setLoading.on()

    await new Promise(resolve => setTimeout(resolve, 2000))

    setLoading.off()
  }

  return (
    <>
      <Button onCl ick={fetchData}>
        Загрузить данные
      </Button>

      {loading && <p>Загрузка...</p>}
    </>
  )
}

Использование с компонентом `Switch`

import { Switch } from "@chakra-ui/react"

function SwitchExample() {
  const [enabled, setEnabled] = useBoolean()

  return (
    <Switch
      isChecked={enabled}
      onCha nge={setEnabled.toggle}
    />
  )
}

Использование с `Collapse`

import { Button, Collapse, Box } from "@chakra-ui/react"

function CollapseExample() {
  const [show, setShow] = useBoolean()

  return (
    <>
      <Button onCl ick={setShow.toggle}>
        Toggle
      </Button>

      <Collapse in={show}>
        <Box p="4" bg="gray.100">
          Скрываемый контент
        </Box>
      </Collapse>
    </>
  )
}

Паттерн “контролируемого переключателя”

Иногда требуется связать несколько элементов интерфейса с одним boolean-состоянием.

function SidebarExample() {
  const [isOpen, setIsOpen] = useBoolean()

  return (
    <>
      <Button onCl ick={setIsOpen.toggle}>
        Меню
      </Button>

      {isOpen && (
        <aside>
          Боковая панель
        </aside>
      )}
    </>
  )
}

Деструктуризация методов

Иногда удобно сразу извлечь методы.

const [isOpen, { on, off, toggle }] = useBoolean()

Использование:

<Button onCl ick={on}>Открыть</Button>
<Button onCl ick={off}>Закрыть</Button>
<Button onCl ick={toggle}>Переключить</Button>

Такой подход делает код более лаконичным.

Практические сценарии применения

useBoolean особенно полезен при реализации:

UI-компонентов:

модальные окна
dropdown меню
tooltip
popover
accordion
collapse

Логических состояний:

состояние загрузки
состояние ошибки
активность элементов
переключение тем

Управление интерфейсом:

скрытие/показ блоков
включение/выключение функциональности
раскрытие списков

Когда использовать `useBoolean`

Хук оптимален в ситуациях, когда состояние:

имеет строго два значения
требует частого переключения
используется в UI-логике

Если состояние содержит больше вариантов (loading, error, success), предпочтительнее использовать useState.

Архитектурные преимущества

Использование useBoolean улучшает архитектуру компонентов:

Читаемость

setMenu.on()
setMenu.off()

вместо

setMenu(true)
setMenu(false)

Единый стандарт управления

Все boolean-состояния управляются одинаково.

Снижение количества вспомогательных функций

Не требуется писать open, close, toggle.

Комбинирование с другими хуками Chakra UI

useBoolean часто используется вместе с:

useDisclosure
useToggle
useBreakpointValue
useOutsideClick

Пример совместного использования:

function Example() {
  const [open, setOpen] = useBoolean()
  const ref = useRef()

  useOutsideClick({
    ref: ref,
    handler: setOpen.off
  })

  return (
    <div ref={ref}>
      {open && <p>Контент</p>}
    </div>
  )
}

Производительность

useBoolean не добавляет дополнительных накладных расходов:

основан на useState
методы мемоизированы
не вызывает лишних перерисовок

Поэтому его использование безопасно даже в часто обновляемых компонентах.

Резюме возможностей хука

useBoolean предоставляет компактный API для управления логическими состояниями:

on()      → true
off()     → false
toggle()  → переключение
set(v)    → установка значения

Использование этого хука делает код интерфейса:

компактнее
выразительнее
проще для поддержки

Он широко применяется в компонентах Chakra UI и считается стандартным инструментом для управления бинарными состояниями интерфейса.