Openwork solidjs-patterns

Why this skill exists

OpenWork’s UI is SolidJS: it updates via signals, not React-style rerenders. Most “UI stuck” bugs are actually state coupling bugs (e.g. one global

busy()

disabling an unrelated action), not rerender issues.

This skill captures the patterns we want to consistently use in OpenWork.

Core rules

• Prefer fine-grained signals over shared global flags.
• Keep async actions scoped (each action gets its own

  pending

  state).
• Derive UI state via

  createMemo()

  instead of duplicating booleans.
• Avoid mutating arrays/objects stored in signals; always create new values.

Scoped async actions (recommended)

When an operation can overlap with others (permissions, installs, background refresh), don’t reuse a global

busy()

.

Use a dedicated signal per action:

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