Solid.js Batching — Grouping Reactive Updates

In this tutorial, you will learn about Solid.js Batching. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Solid.js batching: group multiple signal updates into a single reactive notification for optimal performance and consistent state.

In this lesson, you'll use batch() to group multiple signal updates, preventing intermediate effects from running with partial state.

What You'll Learn

How batching works in Solid.js, use batch() for grouped updates, understand automatic batching, and optimize performance.

Why It Matters

Without batching, updating three signals triggers three separate effect runs. Batching coalesces them into one, improving performance and ensuring state consistency.

Real-World Use

Doda Browser batches tab updates: when restoring a session, multiple tab signals update together in a single batch.

flowchart LR
    A[Without Batch] --> B[Update Signal 1]
    B --> C[Effect Runs]
    C --> D[Update Signal 2]
    D --> E[Effect Runs Again]
    A --> F[With Batch]
    F --> G[Update All Signals]
    G --> H[Effect Runs Once]
    style F fill:#2c4f7c,color:#fff

Using batch()

import { createSignal, batch } from "solid-js";

const [firstName, setFirstName] = createSignal("John");
const [lastName, setLastName] = createSignal("Doe");
const [age, setAge] = createSignal(30);

// Without batch: three separate updates, three effect runs
// With batch: one update, one effect run
batch(() => {
  setFirstName("Jane");
  setLastName("Smith");
  setAge(25);
});

// Effect runs once with all values updated

Automatic Batching

Solid.js automatically batches updates within event handlers:

function handleSubmit() {
  // These are automatically batched
  setLoading(true);
  setError(null);
  setData(response.data);
  setLoading(false);
}

Manual batching is needed for setTimeout, async callbacks, or microtasks.

Batching in Async Code

async function fetchUser(id) {
  setLoading(true); // Not in event handler, not auto-batched

  const response = await fetch(`/api/users/${id}`);
  const user = await response.json();

  batch(() => {
    setUser(user);
    setLoading(false);
  });
}

Batching with Effects

createEffect(() => {
  console.log("Full name:", `${firstName()} ${lastName()}`);
});

// Without batch:
setFirstName("Jane"); // Effect runs: "Full name: Jane Doe"
setLastName("Smith"); // Effect runs: "Full name: Jane Smith"

// With batch:
batch(() => {
  setFirstName("Jane");
  setLastName("Smith");
});
// Effect runs once: "Full name: Jane Smith"

Common Mistakes

1. Not batching in async code: setTimeout, Promise.then, and requestAnimationFrame callbacks don't auto-batch.
2. Batching everything unnecessarily: Auto-batching in event handlers is sufficient. Manual batch only needed for async code.
3. Forgetting to import batch: batch must be imported from solid-js. It's not globally available.
4. Nesting batch calls: Batches can nest. The outer batch determines when notifications fire.
5. Assuming immediate updates inside batch: Inside batch(), signals update synchronously but effects don't run until the batch completes.

Practice Questions

1. What does batch() do? Answer: Groups multiple signal updates so effects run once after all updates, not after each individual update.

2. When does Solid.js automatically batch updates? Answer: Inside event handlers. Updates to signals in event callbacks are automatically batched.

3. When should you manually use batch()? Answer: In async code (setTimeout, fetch callbacks, Promise handlers) where multiple signals are updated together.

4. What happens inside a batch if an error occurs? Answer: The batch stops executing. The error propagates, and already-applied signal updates retain their new values.

Challenge

Create a user profile form that updates three signals (name, email, bio) on save. Compare effect runs with and without batching by adding logging to an effect.

Mini Project

Build a game scoreboard where a batch updates multiple player scores simultaneously. Use batching to ensure the displayed total is consistent with individual scores.

FAQ

What's Next

Learn about Solid.js Props for passing data between components.