Solid 2.0 | The "hidden" cost of async rendering in solid. (and what to do about it)

[mizulu]

Solid 2.0: Understanding Async Rendering Costs

Solid 2.0 evaluates expressions repeatedly until all async parts of the expression are resolved.

<>{ a() + b() + c() }</>

Here, a, b, and c are unresolved async memos.

As each resolves, Solid re‑evaluates:

() => a() + b() + c()

an additional three times, once per dependency settling with its initial value.

This is cheap. Not free, but cheap (with a pure async dependency)

(illustrate the expression evaluation, note that both a,b,c are already inflight, memos are eager in solid not lazy)

---

When the Expression Is Heavy

Consider:

<>{ doHeavyStuff(a()) + doHeavyStuff(b()) + doHeavyStuff(c()) }</>

In the worst case, dependencies resolve in the order a → b → c.

doHeavyStuff will run:

• a → 3 times
• b → 2 times
• c → 1 time

If doHeavyStuff() costs 1 second, the total cost becomes 6 seconds, instead of the optimal cost of 3s.

Solid’s naïve async evaluation model requires the user to memoize heavy work manually.
In effect, Solid inherits React like rendering model ( rerender on any dependency change until they all settle, then it is back to solid model).

---

Mitigating the Cost

1. Move Heavy Work Into a Memo

const aMemo = createMemo(() => doHeavyStuff(a()))
const bMemo = createMemo(() => doHeavyStuff(b()))
const cMemo = createMemo(() => doHeavyStuff(c()))

<>{ aMemo() + bMemo() + cMemo() }</>

2. Hoist Async Dependencies Early

Short‑circuit heavy work until all deps resolve:

<>{ (a(), b(), c(), doHeavyStuff(a()) + doHeavyStuff(b()) + doHeavyStuff(c())) }</>

3. Use a Helper

function revealOn(deps, branch) {
  deps.forEach(f => f())
  return branch()
}

<>{ revealOn([a, b, c], () =>
  doHeavyStuff(a()) + doHeavyStuff(b()) + doHeavyStuff(c())
) }</>

---

Why This Matters

Solid 2.0 tries hard to hide async from the user, but the hidden cost of async resolution still exists.
Solid’s compiler has no awareness that:

• a, b, c are async signals
• doHeavyStuff is expensive or IO‑bound

There is no syntax‑level opt‑in to mark async reads:

<>{ doHeavyStuff(async a()) + doHeavyStuff(async b()) + doHeavyStuff(async c()) }</>

Because Solid cannot detect async at compile time, it cannot automatically hoist or short‑circuit heavy expressions.
The user must optimize these cases manually.

---

Practical Options

• Memoize heavy work — the pragmatic, reliable solution
• Use a helper like revealOn - clean separation, avoids extra memo layers
• Manual hoisting - fine for small expressions, ad‑hoc but effective