Solidjs Patterns

const [replying, setReplying] = createSignal(false);

async function respond() {
  if (replying()) return;
  setReplying(true);
  try {
    await doTheThing();
  } finally {
    setReplying(false);
  }
}

Why

A single busy() boolean creates deadlocks:

• Long-running task sets busy(true)
• A permission prompt appears and its buttons are disabled by busy()
• The task can’t continue until permission is answered
• The user can’t answer because buttons are disabled

Fix: permission UI must be disabled only by a permission-specific pending state.

Signal snapshots in async handlers

If you read signals inside an async function and you need stable values, snapshot early:

const request = activePermission();
if (!request) return;
const requestID = request.id;

await respondPermission(requestID, "always");

Derived UI state

Prefer createMemo() for computed disabled states:

const canSend = createMemo(() => prompt().trim().length > 0 && !busy());

Lists

• Use setter callbacks for derived updates:

setItems((current) => current.filter((x) => x.id !== id));

• Don’t mutate current in-place.

Practical checklist (SolidJS UI changes)

• Does any button depend on a global flag that could be true during long-running work?
• Could two async actions overlap and fight over one boolean?
• Is any UI state duplicated (can be derived instead)?
• Do event handlers read signals after an await where values might have changed?
• If you refactor props/types, did you update all intermediate component signatures and call sites?

References

• SolidJS: https://www.solidjs.com/docs/latest
• SolidJS signals: https://www.solidjs.com/docs/latest/api#createsignal
• SolidJS memos: https://www.solidjs.com/docs/latest/api#creatememo