Skip to content
Learni
View all tutorials
JavaScript Avancé

Comment optimiser SolidJS avec primitives avancées en 2026

18 minADVANCED
PerformanceFrontendSolidJS

Introduction

SolidJS se distingue par sa réactivité fine-grained qui évite les re-renders inutiles. En 2026, les développeurs avancés exploitent ses primitives pour gérer des états complexes, des fetches optimisés et des composants ultra-performants. Ce tutoriel vous guide à travers la création de stores réactifs, de ressources asynchrones et de primitives personnalisées. Vous apprendrez à combiner batching, context et SSR pour des applications scalables. Chaque concept est illustré par du code production-ready que vous pouvez copier directement.

Prérequis

  • Node.js 20+
  • Connaissances solides en JavaScript/TypeScript
  • Expérience avec la réactivité (signals, effects)
  • Vite installé globalement
  • SolidJS 1.9+

Initialisation du projet SolidJS

terminal
npm create solid@latest my-advanced-app -- --template ts
cd my-advanced-app
npm install

Cette commande génère un projet SolidJS TypeScript prêt pour la production. Le template inclut déjà Vite et les outils de build optimisés pour la réactivité fine-grained.

Création d'un store réactif avancé

src/stores/userStore.ts
import { createStore } from 'solid-js/store';

export const [userStore, setUserStore] = createStore({
  users: [] as Array<{ id: number; name: string; active: boolean }>,
  selectedId: null as number | null,
});

export const addUser = (name: string) => {
  setUserStore('users', (users) => [...users, { id: Date.now(), name, active: true }]);
};

export const toggleUser = (id: number) => {
  setUserStore('users', (u) => u.id === id, 'active', (active) => !active);
};

Le store utilise createStore pour une mutabilité contrôlée et une granularité optimale. Les mises à jour sont précises et n'entraînent que les re-renders nécessaires.

Primitive personnalisée pour le batching

src/primitives/useBatchedEffect.ts
import { batch, createEffect, Accessor } from 'solid-js';

export function useBatchedEffect<T>(source: Accessor<T>, fn: (value: T) => void) {
  createEffect(() => {
    const value = source();
    batch(() => {
      fn(value);
    });
  });
}

Cette primitive encapsule batch pour regrouper les mises à jour et éviter les recalculs intermédiaires. Idéale pour les opérations multiples sur des stores.

Gestion de ressources asynchrones

src/components/UserList.tsx
import { createResource, For } from 'solid-js';
import { addUser } from '../stores/userStore';

const fetchUsers = async () => {
  const res = await fetch('/api/users');
  return res.json();
};

export default function UserList() {
  const [users] = createResource(fetchUsers);
  return (
    <div>
      <button onClick={() => addUser('Nouveau')}>Ajouter</button>
      <For each={users()}>{(user) => <div>{user.name}</div>}</For>
    </div>
  );
}

createResource gère automatiquement l'état loading/error et le suspense. Le For component assure un rendu ultra-efficace des listes dynamiques.

Intégration avec SolidStart SSR

src/routes/index.tsx
import { createRouteData } from 'solid-start';
import UserList from '~/components/UserList';

export function routeData() {
  return createRouteData(async () => {
    const res = await fetch('https://api.example.com/users');
    return res.json();
  });
}
export default function Home() {
  return <UserList />;
}

SolidStart permet un SSR hydraté avec des données préchargées. createRouteData assure une hydration sans flash et une performance optimale côté serveur.

Bonnes pratiques

  • Utilisez toujours batch pour les mises à jour groupées
  • Préférez les primitives personnalisées pour la réutilisabilité
  • Évitez les effets dans les boucles de rendu
  • Testez les performances avec Solid DevTools
  • Structurez vos stores par domaine métier

Erreurs courantes à éviter

  • Oublier d'utiliser des Accessors dans les primitives
  • Modifier directement le state sans setStore
  • Ignorer la gestion des erreurs dans createResource
  • Utiliser des effets pour des calculs dérivés (préférez createMemo)

Pour aller plus loin

Approfondissez vos compétences avec nos formations SolidJS avancées. Découvrez aussi la documentation officielle et les exemples sur GitHub pour les patterns de 2026.