batch()

Defers the synchronous triggering of downstream effects until the provided callback function has finished executing. This is crucial for optimizing performance when you need to update multiple related signals at once and want to avoid intermediate, unnecessary re-renders or effect executions.

function batch<T>(batchFn: () => T): T;

ParametersCopy Anchor Link

ReturnsCopy Anchor Link

Returns the result of the batchFn function.

UsageCopy Anchor Link

Preventing Multiple RendersCopy Anchor Link

Without batch, mutating three separate signals sequentially will synchronously trigger any shared effects three separate times. batch ensures the effect only runs once after all mutations are complete.

import { signal, effect, batch } from 'ripple-reactive';

const firstName = signal('Aditya');
const lastName = signal('Singh');
const age = signal(20);

// This effect depends on all three signals
effect(() => {
  console.log(`User: ${firstName.value} ${lastName.value}, Age: ${age.value}`);
});

// Using batch ensures the effect above only logs ONCE
// instead of three times.
batch(() => {
  firstName.value = 'ADITYA';
  lastName.value = 'SING';
  age.value = 21;
});

Returning ValuesCopy Anchor Link

You can return values directly from the batch function if you need to calculate a result during the transaction.

const targetId = signal(1);

const result = batch(() => {
  targetId.value = 2;
  return 'Transaction Complete';
});

console.log(result); // 'Transaction Complete'