🧮 Derived Fields

Computed fields that automatically update when dependencies change

Interactive Derived Fields Demo

John Doe

Age: 25 years old

🔞 Adult

Name Controls (affects fullName)

Age Controls (affects isAdult)

Base Fields:

{
  "firstName": "John",
  "lastName": "Doe",
  "age": 25
}

Derived Fields:

{
  "fullName": "John Doe",
  "isAdult": true
}

Component renders: 0 | This component re-renders when any of its subscribed fields (including derived ones) change.

🔄 Automatic Updates

Derived fields automatically recompute when their dependencies change:

fullName updates when firstName or lastName changes
isAdult updates when age changes
Derived fields are cached and only recompute when necessary
You can chain derived fields to create complex computed values

Store with Derived Fields

const userStore = createFieldStore({
  firstName: "John",
  lastName: "Doe",  
  age: 25,
})
.derived(
  "fullName",
  ["firstName", "lastName"],
  ({ firstName, lastName }) => 
    `${firstName} ${lastName}`
)
.derived(
  "isAdult", 
  ["age"], 
  ({ age }) => age >= 18
);

Using Derived Fields

function UserCard() {
  const { fullName, isAdult } = 
    userStore.useFields(["fullName", "isAdult"]);

  return (
    <div>
      <h2>{fullName}</h2>
      {isAdult && <span>🔞 Adult</span>}
    </div>
  );
}

Complex Derived Fields Example

const userStore = createFieldStore({
  firstName: "John",
  lastName: "Doe",
  age: 25,
  salary: 50000,
})
.derived("fullName", ["firstName", "lastName"], 
  ({ firstName, lastName }) => `${firstName} ${lastName}`)
.derived("isAdult", ["age"], 
  ({ age }) => age >= 18)
.derived("ageGroup", ["age"], ({ age }) => {
  if (age < 18) return "minor";
  if (age < 65) return "adult";
  return "senior";
})
.derived("displayInfo", ["fullName", "ageGroup", "salary"],
  ({ fullName, ageGroup, salary }) => 
    `${fullName} (${ageGroup}) - $${salary.toLocaleString()}`);

⚡ Performance Features

Lazy Evaluation: Derived fields only compute when accessed
Caching: Results are cached until dependencies change
Selective Updates: Only recompute when dependencies actually change
Reactive Integration: Uses efficient observable patterns under the hood