🧠 setMemo

This guide explains how to use setMemo in SeraJS to create derived, memoized reactive values based on other signals.

---

💡 What is setMemo?

setMemo allows you to compute derived values from one or more signals. It automatically tracks signal dependencies and only recomputes the result when needed.

const result = setMemo(() => someSignal() + 1);

• Returns a reactive getter function, similar to setSignal.
• You can use the returned memo directly in JSX.

---

🚀 Example App

import { h, setSignal, Fragment, setMemo } from "serajs";

export default function App() {
  const [count, setCount] = setSignal(0);

  const Dabble = setMemo(() => count() * 2); // Doubles the count

  return (
    <Fragment>
      <h1>{() => count()}</h1>
      <button onClick={() => setCount(count() + 1)}>Increment Count</button>
      <button onClick={() => setCount(count() - 1)}>Decrement Count</button>
      <button onClick={() => setCount(0)}>Reset Count</button>
      <div>
        <h1>Dabble Count: {Dabble}</h1>
        {/* OR */}
        {/* <h1>Dabble Count: {() => Dabble()}</h1> */}
      </div>
    </Fragment>
  );
}

---

✅ How to Use in JSX

You can use a memoized value in JSX in two valid ways:

<h1>{() => Dabble()}</h1> // ✅ Valid - function form
<h1>{Dabble}</h1>         // ✅ Also valid - auto-evaluated

Both are fully reactive and update when their dependencies (like count) change.

---

🧠 Why Use setMemo?

• 🚀 Efficient: Avoids unnecessary re-renders by caching results.
• 🧼 Clean: Separates derived logic from your main UI logic.
• 🔁 Reactive: Tracks and updates automatically when dependencies change.

---

⚠️ When to Use setMemo

Use it when:

• You need to compute a value based on other signals.
• The derived value is used in multiple places.
• You want to optimize performance.

---

🧪 Example Output

Count	Dabble
0	0
1	2
2	4
3	6

---

🔄 Comparison

Concept	Description
setSignal	Basic reactive value
setMemo	Derived reactive value
setEffect	Side-effect that runs on change

---

🎉 Summary

• setMemo(() => derivedValue) gives you a cached, reactive function.
• You can use it in JSX as {Dabble} or {() => Dabble()}.
• Great for computed values that depend on signals.

---

Pager Previous page: setEffect