solid-errors-react-contamination

name	solid-errors-react-contamination
description	Use when reviewing SolidJS code for React anti-patterns or converting React components to SolidJS. Prevents destructured props, useState/useEffect habits, Array.map rendering, and all other React patterns that silently break SolidJS reactivity. Covers all 12+ contamination patterns including props destructuring, signal misuse, effect cleanup, list rendering, conditional rendering, refs, children, and navigation. Keywords: React to SolidJS, destructure props, createSignal, createEffect, For component, Show component, anti-pattern, migration.
license	MIT
compatibility	Designed for Claude Code. Requires SolidJS 1.x/2.x with TypeScript.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

solid-errors-react-contamination

Critical Warnings

NEVER destructure props in SolidJS components. Destructuring severs the reactive proxy connection. The component function runs ONCE — destructured values are frozen snapshots that NEVER update. This is the #1 source of broken SolidJS code generated by AI assistants trained on React.

NEVER assume components re-render. SolidJS component functions execute exactly ONCE to set up the reactive graph. Code in the component body that depends on state changes (derived values, conditionals, logging) MUST be wrapped in reactive primitives (createMemo, createEffect) or inline JSX expressions.

NEVER use dependency arrays. SolidJS tracks dependencies automatically. There is no [deps] argument to createEffect or createMemo. Adding one is a syntax error or passes it as the initial value parameter.

NEVER return cleanup functions from effects. SolidJS uses onCleanup() as a separate call inside the effect, NOT a return value.

NEVER use Array.map() for list rendering. It recreates ALL DOM nodes on every array change. ALWAYS use <For> or <Index> components.

Quick Reference — All Anti-Patterns

ID	Pattern	Severity	Detection
AP-001	Destructuring props	CRITICAL	function X({ prop } or const { x } = props
AP-002	Destructuring signal value	CRITICAL	const val = signal() outside JSX/effect
AP-003	useState instead of createSignal	CRITICAL	useState import or usage
AP-004	useEffect instead of createEffect	CRITICAL	useEffect import or [deps] array
AP-005	useMemo instead of createMemo	HIGH	useMemo import or dependency array
AP-006	Re-render assumption	CRITICAL	Derived values as plain variables in component body
AP-007	Conditional signal access	HIGH	Signal read inside if in effect
AP-008	Early return before signal access	HIGH	return before signal call in effect
AP-009	Storing signal in variable	HIGH	const x = signal() in component body
AP-010	Spreading props unsafely	MEDIUM	{...props} without splitProps
AP-011	Array.map for lists	HIGH	.map() in JSX return
AP-012	Ternary instead of Show	MEDIUM	{cond ? <A/> : <B/>}
AP-013	switch/case in component body	HIGH	switch statement in component return
AP-014	key prop on list items	LOW	key={...} prop in For callback
AP-015	useRef instead of let ref	MEDIUM	useRef import or .current access
AP-016	React.createElement assumption	LOW	Manual element creation calls
AP-017	children as static value	HIGH	props.children without children() helper
AP-018	useEffect cleanup return	CRITICAL	return () => cleanup in effect
AP-019	useRouter / next/router	HIGH	useRouter import
AP-020	useEffect for data fetching	HIGH	fetch inside useEffect/createEffect
AP-021	element prop on Route	HIGH	element={<Component/>} on Route
AP-022	getServerSideProps pattern	HIGH	Separate data-fetching exports
AP-023	Form onSubmit with preventDefault	MEDIUM	e.preventDefault() in form handler

Top 10 Priority Patterns (Detailed)

AP-001: Destructuring Props (CRITICAL)

// WRONG -- React pattern: destructuring kills reactive tracking
function Greeting({ name }: { name: string }) {
  return <h1>Hello {name}</h1>; // NEVER updates
}

// WRONG -- Same problem, different syntax
function Greeting(props: { name: string }) {
  const { name } = props; // Snapshot, frozen forever
  return <h1>Hello {name}</h1>;
}

// CORRECT -- Access props object directly
function Greeting(props: { name: string }) {
  return <h1>Hello {props.name}</h1>; // Reactive, updates on change
}

// CORRECT -- Use splitProps when separating concerns
function Greeting(props: { name: string; class?: string }) {
  const [local, rest] = splitProps(props, ["name"]);
  return <h1 {...rest}>Hello {local.name}</h1>;
}

Why it breaks: Props are reactive getters on a proxy. Destructuring reads the value once and discards the proxy connection.

AP-002: Destructuring Signal Value (CRITICAL)

// WRONG -- Snapshot, never updates
const [count, setCount] = createSignal(0);
const value = count(); // Frozen at 0
return <div>{value}</div>;

// CORRECT -- Call getter in JSX expression
return <div>{count()}</div>;

Why it breaks: Calling count() outside a tracking scope captures a static value. Inside JSX, the compiler wraps it in a reactive effect.

AP-003: useState vs createSignal (CRITICAL)

// WRONG -- React API does not exist in SolidJS
const [count, setCount] = useState(0);
return <div>{count}</div>; // count is a value in React

// CORRECT -- SolidJS returns a getter FUNCTION
const [count, setCount] = createSignal(0);
return <div>{count()}</div>; // MUST call count()

Why it breaks: createSignal returns [getter, setter] where getter is a function. Forgetting () renders the function object, not the value.

AP-004: useEffect vs createEffect (CRITICAL)

// WRONG -- Dependency array pattern
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

// CORRECT -- Automatic tracking, no dependency array
createEffect(() => {
  document.title = `Count: ${count()}`;
});

Why it breaks: SolidJS has NO dependency array concept. The second argument to createEffect is an initial value for the previous-value parameter, NOT a dependency list.

AP-005: useMemo vs createMemo (HIGH)

// WRONG -- React pattern with dependency array
const double = useMemo(() => count * 2, [count]);

// CORRECT -- Auto-tracked, IS a reactive source
const double = createMemo(() => count() * 2);
// Use as: double() -- it's a getter function

Why it breaks: React's useMemo is NOT a reactive source. SolidJS's createMemo IS -- other computations can track it.

AP-006: Component Re-Render Assumption (CRITICAL)

// WRONG -- Expects component body to re-run
function Counter() {
  const [count, setCount] = createSignal(0);
  const doubled = count() * 2; // Computed ONCE, frozen
  console.log("render"); // Logs ONCE, not on updates
  return <p>{doubled}</p>;
}

// CORRECT -- Use derived function or memo
function Counter() {
  const [count, setCount] = createSignal(0);
  const doubled = createMemo(() => count() * 2);
  return <p>{doubled()}</p>;
}

Why it breaks: The component function is a setup function. It runs once. Only reactive expressions (effects, memos, JSX bindings) re-execute.

AP-007: Conditional Signal Access (HIGH)

// WRONG -- Signal only tracked when condition is true
createEffect(() => {
  if (isEnabled()) {
    console.log(data()); // NOT tracked when isEnabled() is false
  }
});

// CORRECT -- Access all signals before conditions
createEffect(() => {
  const enabled = isEnabled();
  const currentData = data(); // ALWAYS tracked
  if (enabled) {
    console.log(currentData);
  }
});

Why it breaks: SolidJS tracks signals at read time. If a branch prevents reading a signal, that signal is not registered as a dependency for that execution.

AP-008: Early Return Before Signal Access (HIGH)

// WRONG -- Signals after return are never tracked
createEffect(() => {
  if (loading()) return;
  console.log(name()); // Never tracked when loading is true
});

// CORRECT -- Read all signals first
createEffect(() => {
  const isLoading = loading();
  const currentName = name();
  if (isLoading) return;
  console.log(currentName);
});

AP-009: Storing Signal in Variable (HIGH)

// WRONG -- Stale snapshot
function Timer() {
  const [count, setCount] = createSignal(0);
  const current = count(); // Snapshot: always 0

  setInterval(() => {
    console.log(current); // Always logs 0
  }, 1000);

  return <div>{current}</div>; // Always shows 0
}

// CORRECT -- Call getter when needed
function Timer() {
  const [count, setCount] = createSignal(0);
  return <div>{count()}</div>; // Reactive
}

AP-010: Spreading Props Unsafely (MEDIUM)

// WRONG -- May break tracking for dynamic props
function Button(props: ButtonProps) {
  return <button {...props}>{props.children}</button>;
}

// CORRECT -- Use splitProps for controlled spreading
function Button(props: ButtonProps) {
  const [local, rest] = splitProps(props, ["children", "onClick"]);
  return <button onClick={local.onClick} {...rest}>{local.children}</button>;
}

Decision Tree: Is This a React Anti-Pattern?

Code contains signal/props access?
├── Props destructured in function signature? --> AP-001 (CRITICAL)
├── Props destructured with const { } = props? --> AP-001 (CRITICAL)
├── Signal value stored in const outside JSX? --> AP-002/AP-009 (CRITICAL/HIGH)
├── useState / useEffect / useMemo import? --> AP-003/004/005 (CRITICAL)
├── Dependency array [deps] on effect/memo? --> AP-004/005 (CRITICAL/HIGH)
├── Component body has derived non-reactive values? --> AP-006 (CRITICAL)
├── Effect has early return before signal reads? --> AP-008 (HIGH)
├── Effect has conditional signal access? --> AP-007 (HIGH)
├── Return value from effect for cleanup? --> AP-018 (CRITICAL)
├── Array.map() in JSX? --> AP-011 (HIGH)
├── key={} prop on elements? --> AP-014 (LOW)
├── useRef or .current access? --> AP-015 (MEDIUM)
├── props.children used without children() helper? --> AP-017 (HIGH)
└── useRouter import? --> AP-019 (HIGH)

Reference Links

• references/methods.md -- Detection rules with regex patterns for every anti-pattern
• references/examples.md -- COMPLETE catalog: every AP-NNN with WRONG + CORRECT side by side
• references/anti-patterns.md -- Consolidated quick reference table with detection + fix per pattern

Official Sources

• https://docs.solidjs.com/concepts/intro-to-reactivity
• https://docs.solidjs.com/concepts/components/props
• https://docs.solidjs.com/concepts/signals
• https://docs.solidjs.com/concepts/effects
• https://docs.solidjs.com/reference/basic-reactivity/create-signal
• https://docs.solidjs.com/reference/basic-reactivity/create-effect
• https://docs.solidjs.com/reference/basic-reactivity/create-memo
• https://docs.solidjs.com/reference/components/for
• https://docs.solidjs.com/reference/components/show