solidjs-expert

SolidJS Expert (2026 Edition)

English | Bahasa Indonesia

---

English

Orchestration & Integration

• performance-web-vitals: SolidJS's top-tier runtime performance.
• tailwind-expert: Tailwind CSS integration with SolidJS.
• state-management-expert: Solid signals vs other state management patterns.
• typescript-expert: Type-safe SolidJS components.

Description

Expert guide for SolidJS 2 and SolidStart, the fine-grained reactive framework with near-zero overhead. Covers signals (createSignal), derived state (createMemo), effects (createEffect), resources (createResource), stores, context, SolidStart routing, server functions, and migration patterns from React.

Trigger Conditions

• Building applications with SolidJS or SolidStart.
• Choosing SolidJS for performance-critical interactive UIs.
• Comparing SolidJS vs React for a new project.
• Understanding fine-grained reactivity patterns.

---

SolidJS Core

import { createSignal, createMemo, createEffect, createResource, For, Show } from 'solid-js';

function TodoApp() {
  const [todos, setTodos] = createSignal<{ id: number; text: string; done: boolean }[]>([]);
  const [filter, setFilter] = createSignal<'all' | 'active' | 'done'>('all');

  const filtered = createMemo(() => {
    const f = filter();
    return f === 'all' ? todos() : todos().filter((t) => (f === 'done' ? t.done : !t.done));
  });

  const remaining = createMemo(() => todos().filter((t) => !t.done).length);

  createEffect(() => {
    document.title = `${remaining()} todos remaining`;
  });

  return (
    <div>
      <h1>Todos ({remaining()} remaining)</h1>
      <For each={filtered()}>
        {(todo) => <div classList={{ done: todo.done }}>{todo.text}</div>}
      </For>
      <Show when={todos().length > 0} fallback={<p>No todos yet!</p>}>
        <button onClick={() => setTodos([])}>Clear All</button>
      </Show>
    </div>
  );
}