performance.md

technology	SolidJS
domain	frontend
level	Senior/Architect
version	1.8+
tags	performance advanced solidjs best-practices clean-code scalable-code
ai_role	Senior SolidJS Performance Expert
last_updated	2026-03-22

🚀 SolidJS Advanced Performance Best Practices

⬆️ Back to Top

📖 Context & Scope

• Primary Goal: Enforce strict adherence to advanced performance best practices in SolidJS.
• Target Tooling: Cursor, Windsurf, Antigravity.
• Tech Stack Version: SolidJS 1.8+

⚡ II. Advanced Performance

⚡ 1. Suboptimal List Rendering

Note

Context: Rendering large lists in the DOM.

❌ Bad Practice

function List(props) {
  return (
    <ul>
      {props.items.map(item => (
        <li>{item.name}</li>
      ))}
    </ul>
  );
}

⚠️ Problem

Using standard .map() for array rendering creates new DOM nodes for every element when the array changes, even if only one item is added or modified. This causes high CPU overhead and negates SolidJS's fine-grained reactivity.

✅ Best Practice

import { For } from 'solid-js';

function List(props) {
  return (
    <ul>
      <For each={props.items}>
        {(item) => <li>{item.name}</li>}
      </For>
    </ul>
  );
}

🚀 Solution

Always utilize the built-in <For> component. It caches DOM elements and handles granular updates when the array changes, reusing nodes instead of discarding and recreating them.