DocsBlog

  • 1.1.2

  • light

    dark

    system

    Switch mode

  • Cerberus

    Acheron

    Elysium

Get Started
Components
Data Grid
Signals
Styling
Theming

Get Started

OverviewReactivityData FetchingStores

Primitives

createSignalcreateQuerycreateMutationcreateComputedcreateEffectcreateStoreContextbatch

Hooks

useQueryuseMutationuseReaduseSignal

Components

ReactiveText

On this page

  • Edit this page on Github

Batch Updates

Learn how to update multiple signals at once in React.

  • source

Usage

The batch primitive is useful when you want to make multiple signal updates at once. This can include individual updates or signals updating simultaneously to a peer signal updating.

In this example, our batch block updates two signals at once which reference the same signal value.

API

batch accepts a callback containing multiple signal Setters and doesn't return any value.

import { batch } from '@cerberus/signals'
Copy
'use client'

import { HStack } from '@/styled-system/jsx'
import { Button, Text } from '@cerberus/react'
import { batch, useSignal } from '@cerberus/signals'

export function BasicDemo() {
  const [count, setCount] = useSignal<number>(0)
  const [isEven, setIsEven] = useSignal<boolean>(false)

  const increment = () => {
    batch(() => {
      setCount(count + 1)
      setIsEven(count % 2 === 0)
    })
  }

  return (
    <HStack gap="md" w="3/4">
      <Button onClick={increment}>Batch Increment</Button>

      <Text>Count: {count}</Text>
      <Text>Is Even: {isEven ? 'Yes' : 'No'}</Text>
    </HStack>
  )
}

Count: 0

Is Even: No