useComputed

API Reference

Syntax

const computedValue = useComputed(compute, options?)

Parameters

compute: Function that returns a computed value
options (optional):
- deep: Enable deep equality checking for nested objects/arrays (default: false)

Examples

Simple Computed Values

Transform store data reactively with automatic dependency detection.

import { createStore, useComputed } from "zenbox";

const userStore = createStore({
  firstName: "John",
  lastName: "Doe",
  age: 30,
});

function UserProfile() {
  const fullName = useComputed(
    () => `${userStore.value.firstName} ${userStore.value.lastName}`
  );

  const ageGroup = useComputed(() => {
    const age = userStore.value.age;
    if (age < 18) return "Minor";
    if (age < 65) return "Adult";
    return "Senior";
  });

  return (
    <div>
      <h1>{fullName}</h1>
      <p>Age Group: {ageGroup}</p>
    </div>
  );
}

Cross-Store Composition

Combine data from multiple stores effortlessly - dependencies are tracked automatically.

const cartStore = createStore({
  items: [
    { id: 1, price: 999, quantity: 1 },
    { id: 2, price: 25, quantity: 2 },
  ],
});

const settingsStore = createStore({
  taxRate: 0.08,
  discountPercent: 0.1,
});

function CartSummary() {
  const subtotal = useComputed(() =>
    cartStore.value.items.reduce(
      (sum, item) => sum + item.price * item.quantity,
      0
    )
  );

  const total = useComputed(() => {
    const discount = subtotal * settingsStore.value.discountPercent;
    const tax = (subtotal - discount) * settingsStore.value.taxRate;
    return subtotal - discount + tax;
  });

  return (
    <div>
      <p>Subtotal: ${subtotal.toFixed(2)}</p>
      <p>Total: ${total.toFixed(2)}</p>
    </div>
  );
}

Best Practices

✅ Keep computations pure - No side effects, only data transformation

// ❌ Bad: Side effect!
const bad = useComputed(() => {
  localStorage.setItem("count", store.value.count); // Side effect!
  return store.value.count;
});

// ✅ Good: Only only data transformation
const doubled = useComputed(() => store.value.count * 2);

✅ Access specific properties for optimal dependency tracking

// ❌ Bad: Depends on entire user object
const { name } = useComputed(() => userStore.value);

// ✅ Good: Only depends on name property
const userName = useComputed(() => userStore.value.name.toUpperCase());

Hook Comparison

Hook	Purpose	Triggers Re-renders	Use Case
`useComputed`	Derived reactive values	✅ Yes	Data transformation, calculated fields
`useStoreValue`	Direct store subscription	✅ Yes	Raw store access
`useWatch`	Side effects on changes	❌ No	Logging, analytics, external APIs

useStoreValue - Direct store subscription
useWatch - Watch changes with side effects
useWatchEffect - Reactive side effects without cleanup

On this page