solid-js-best-practices（扎实的 js 最佳实践）

Solid.js Best Practices

Comprehensive best practices for building Solid.js applications and components, optimized for AI-assisted code generation, review, and refactoring.

Quick Reference

Essential Imports

import {
  createSignal,
  createEffect,
  createMemo,
  createResource,
  onMount,
  onCleanup,
  Show,
  For,
  Switch,
  Match,
  Index,
  Suspense,
  ErrorBoundary,
  lazy,
  batch,
  untrack,
  mergeProps,
  splitProps,
  children,
} from "solid-js";

import { createStore, produce, reconcile } from "solid-js/store";

Component Skeleton

import { Component, JSX, mergeProps, splitProps } from "solid-js";

interface MyComponentProps {
  title: string;
  count?: number;
  onAction?: () => void;
  children?: JSX.Element;
}

const MyComponent: Component<MyComponentProps> = (props) => {
  // Merge default props
  const merged = mergeProps({ count: 0 }, props);

  // Split component props from passed-through props
  const [local, others] = splitProps(merged, ["title", "count", "onAction"]);

  // Local reactive state
  const [value, setValue] = createSignal("");

  // Derived/computed values
  const doubled = createMemo(() => local.count * 2);

  // Side effects
  createEffect(() => {
    console.log("Count changed:", local.count);
  });

  // Lifecycle
  onMount(() => {
    console.log("Component mounted");
  });

  onCleanup(() => {
    console.log("Component cleanup");
  });

  return (
    <div {...others}>
      <h1>{local.title}</h1>
      <p>Count: {local.count}, Doubled: {doubled()}</p>
      <input
        value={value()}
        onInput={(e) => setValue(e.currentTarget.value)}
      />
      <button onClick={local.onAction}>Action</button>
      {props.children}
    </div>
  );
};

export default MyComponent;

Rules by Category

1. Reactivity (7 rules)

2. Components (10 rules)

3. Control Flow (6 rules)

4. State Management (5 rules)

5. Refs & DOM (7 rules)

6. Performance (6 rules)

7. Accessibility (3 rules)

8. Testing (11 rules)

Task-Based Rule Selection

Writing New Components

Load these rules when creating new Solid.js components:

Code Review

Focus on these rules during code review:

Performance Optimization

Load these rules when optimizing performance:

State Management

Load these rules when working with application state:

Accessibility Audit

Load these rules when auditing accessibility:

Writing Tests

Load these rules when writing or reviewing tests:

Integrating Web Components / Custom Elements

Load these rules when using any custom element library (Shoelace, FAST, Lion, Material Web Components, etc.) or native browser APIs like <dialog> and the Popover API:

Common Mistakes to Catch

Solid.js vs React Mental Model

When helping users familiar with React, keep these differences in mind:

Priority Levels

• CRITICAL: Fix immediately. Causes bugs, broken reactivity, or runtime errors.
• HIGH: Address in code reviews. Important for correctness and maintainability.
• MEDIUM: Apply when relevant. Improves code quality and performance.
• LOW: Consider during refactoring. Nice-to-have optimizations.

Key Solid.js Concepts

Fine-Grained Reactivity

Solid.js updates only the specific DOM elements that depend on changed data, not entire component trees. This is achieved through:

• Signals: Reactive primitives that track dependencies
• Effects: Side effects that automatically re-run when dependencies change
• Memos: Cached derived values that only recompute when dependencies change

Components Render Once

Unlike React, Solid components are functions that run once during initial render. Reactivity happens at the signal level, not the component level. This is why:

• Props must not be destructured (would capture static values)
• Signals must be called as functions (to maintain reactive tracking)
• Control flow uses special components (<Show>, <For>) instead of JS expressions

Stores for Complex State

For nested objects and arrays, Solid provides stores with:

• Fine-grained updates via path syntax
• Automatic proxy wrapping for nested reactivity
• Utilities like produce and reconcile for common patterns

Tooling

For automated linting alongside these best practices, use eslint-plugin-solid. The plugin catches many of the same issues this skill covers (destructured props, early returns, React-specific props, innerHTML usage, style prop format, etc.) and provides auto-fixable rules.

Resources

• Solid.js Documentation