⚛️ React – Installation, Hooks & Déploiement

Impératif (style jQuery / DOM API)

// "Trouve la div, change le texte, cache le bouton, ..."
                            // Risque : état dispersé et incohérent ("UI drift")

                            const el = document.getElementById("count");
                            el.textContent = String(count);

                            if(count > 3){
                            document.getElementById("cta").style.display = "none";
                            }

Problème typique : tu finis avec un état “réel” dans le DOM + un état “logique” dans le JS, et ils divergent avec le temps.

Déclaratif (React)

function Counter(){
                            const [count, setCount] = React.useState(0);

                            return (
                            <div>
                            <p id="count">{count}</p>
                            {count <= 3 && (
                            <button id="cta" onClick={() => setCount(c => c + 1)}>
                            +1
                            </button>
                            )}
                            </div>
                            );
                            }

Ici, l’UI est toujours cohérente avec count : un seul “source of truth”.

Props : contrat d’API d’un composant

function PriceTag({ amount, currency = "EUR" }){
                            return <strong>{amount} {currency}</strong>;
                            }

                            // parent:
                            <PriceTag amount={29.9} currency="EUR" />

• Les props descendent (parent → enfant).
• Un enfant ne modifie pas ses props.

State : interaction & dynamique locale

function SearchBox(){
                            const [q, setQ] = React.useState("");

                            return (
                            <input
                            value={q}
                            onChange={(e) => setQ(e.target.value)}
                            placeholder="Search..."
                            />
                            );
                            }

• State = “mémoire” du composant.
• On met à jour via setters (setQ), pas via mutation brute.

Render phase (calcul)

• Exécution des composants (fonctions) pour produire l’arbre UI.
• Peut être rejouée (en dev strict mode, ou selon scheduling).
• Doit rester “pure-ish” : pas d’effets de bord (API calls, mutations globales).

// Render doit être "safe":
                            function Comp(){
                            // ✅ calcul
                            const x = heavyCompute();

                            // ❌ éviter: side effects ici (fetch, localStorage write, etc.)
                            return <div>...</div>;
                            }

Commit phase (application)

• React met à jour le DOM réel.
• Les effects (useEffect) s’exécutent après commit.
• Les “layout effects” (useLayoutEffect) s’exécutent avant paint.

React.useEffect(() => {
                            // ✅ side effects ici:
                            // fetch, subscriptions, analytics...
                            return () => {/* cleanup */}
                            }, [deps]);

1) Single source of truth

• L’état doit vivre à un endroit clair (local, context, store).
• Éviter de dupliquer le même état dans 3 composants.

2) Data down, actions up

• Props descendent.
• Les événements remontent via callbacks (ou store).

3) Immutabilité (pragmatique)

• On ne mute pas “à la main” les structures d’état → on crée de nouvelles références.
• Pourquoi : comparaison par référence, memoization, predictibilité.

4) Performance = mesurer, pas deviner

• Optimiser trop tôt (useMemo/useCallback partout) = complexité inutile.
• Le vrai levier : architecture UI, découpage composants, keys, listes, virtualisation.

5) “Side effects” au bon endroit

• Rendu = calcul pur-ish.
• Effets = useEffect/useLayoutEffect, avec deps propres + cleanup.

1) Un seul élément racine

// ✅ Fragment (pas de div inutile)
                            return (
                            <>
                            <Header />
                            <Main />
                            </>
                            );

2) Toutes les balises doivent être fermées

// ✅ self-closing
                            <img src="/logo.png" alt="logo" />
                            <input value={q} onChange={...} />

                            // ❌ invalide en JSX
                            // <img src="/logo.png">

3) Attributs “JS friendly”

• class → className
• for → htmlFor
• Attributs en camelCase : onClick, tabIndex, readOnly

4) Commentaires JSX

return (
                            <div>
                            {/* commentaire JSX */}
                            <p>Hello</p>
                            </div>
                            );

5) Attributes booléens

<input disabled />          // ✅ true
                            <input disabled={false} />   // ✅ false (explicite)

OK : expressions

const name = "Alice";
                            const isPro = true;

                            return (
                            <div>
                            <h3>Hello {name.toUpperCase()}</h3>
                            <p>Plan: {isPro ? "Pro" : "Free"}</p>
                            </div>
                            );

Rendu conditionnel : patterns

// 1) AND (afficher si vrai)
                            {isOpen && <Modal />}

                            // 2) Ternaire (if/else UI)
                            {status === "ok" ? <Ok /> : <Error />}

                            // 3) Early return (souvent le plus clair)
                            if (loading) return <Spinner />;

Attention : valeurs qui “s’affichent”

// ⚠️ 0 s'affiche (car 0 est une valeur rendable)
                            {items.length && <p>Items</p>}

                            // ✅ solution
                            {items.length > 0 && <p>Items</p>}

Ce qui ne marche pas : statements

// ❌ pas de if directement dans JSX
                            return (
                            <div>
                            { if(isPro){ <Pro /> } }  // invalide
                            </div>
                            );

                            // ✅ faire avant
                            let content = isPro ? <Pro /> : <Free />;
                            return <div>{content}</div>;

✅ Bonne liste

{users.map(u => (
                            <li key={u.id}>
                            <strong>{u.name}</strong>
                            </li>
                            ))}

• key doit être unique et stable (ne change pas si tri/filtre).
• Évite Math.random() : ça casse la réconciliation (tout re-mount).

❌ Problèmes courants

// ❌ key=index (si la liste peut bouger)
                            {items.map((it, i) => (
                            <Row key={i} item={it} />
                            ))}

Key=index peut être OK uniquement si la liste est statique (pas de tri, pas d’insert, pas de filtre).

Pattern : render “vide” proprement

{items.length === 0
                            ? <EmptyState />
                            : <List items={items} />}

Events : handlers propres

function Button(){
                            const handleClick = (e) => {
                            e.preventDefault();
                            // ...action
                            };

                            return (
                            <button onClick={handleClick}>Save</button>
                            );
                            }

Forms : controlled input

function Login(){
                            const [email, setEmail] = React.useState("");

                            return (
                            <input
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            placeholder="email"
                            />
                            );
                            }

Ref : accès DOM (avec parcimonie)

function FocusMe(){
                            const ref = React.useRef(null);

                            React.useEffect(() => {
                            ref.current?.focus();
                            }, []);

                            return <input ref={ref} />;
                            }

Pièges JSX

• Inline objects : style= recrée un objet à chaque render (souvent OK, mais attention en perf).
• Functions inline partout : pas grave par défaut, mais peut impacter memoization.
• DangerouslySetInnerHTML : risque XSS si contenu non sanitizé.
• Fragments : pense à <> pour éviter DOM inutile.

Injection HTML (danger)

// ⚠️ XSS si html non contrôlé
                            
                            <div dangerouslySetInnerHTML={{ __html: html }} />
                            
                        

Conventions de code (lisibilité)

• Limiter JSX “trop profond” : extraire en composants.
• Pré-calculer variables avant le return (cls, flags, formatted text).
• Éviter ternaires imbriqués → préférer “early return” ou fonctions.
• Nommer clairement les handlers : handleSubmit, onSave…

Props typées

type UserCardProps = {
                            user: { id: string; name: string };
                            onSelect?: (id: string) => void;
                            };

                            function UserCard({ user, onSelect }: UserCardProps){
                            return (
                            <button onClick={() => onSelect?.(user.id)}>
                            {user.name}
                            </button>
                            );
                            }

Children & ReactNode

type PanelProps = {
                            title: string;
                            children: React.ReactNode;
                            };

                            function Panel({ title, children }: PanelProps){
                            return (
                            <section>
                            <h3>{title}</h3>
                            <div>{children}</div>
                            </section>
                            );
                            }

En TSX, tu sécurises l’API des composants (ce qui est un vrai “senior move” sur un gros projet).

npm run dev

• Serveur de développement.
• HMR : modification instantanée sans reload page.
• Idéal pour itérations rapides.

npm run build / preview

• Build de production (assets optimisés).
• preview = simuler la prod localement.

Composant simple (stateless)

function Badge({ label }) {
                            return <span className="badge">{label}</span>;
                            }

Composant avec état

function Counter() {
                            const [count, setCount] = React.useState(0);

                            return (
                            <div>
                            <p>{count}</p>
                            <button onClick={() => setCount(c => c + 1)}>+1</button>
                            </div>
                            );
                            }

Pourquoi c’est mieux que les classes (en général)

• Moins de boilerplate (pas de this, pas de constructors).
• Composition de logique via hooks custom (réutilisation réelle).
• Lisibilité : props + state + rendu au même endroit.
• Interop : hooks modernes, libs modernes.

Props = contrat

function Button({ variant = "primary", onClick, children }) {
                            const cls = `btn btn--${variant}`;
                            return (
                            <button className={cls} onClick={onClick}>
                            {children}
                            </button>
                            );
                            }

• children = contenu “slot” (composition).
• Defaults = API ergonomique.
• Props doivent être stables et prévisibles.

Composition (Layout / Slots)

function Card({ title, actions, children }) {
                            return (
                            <section className="card">
                            <header>
                            <h3>{title}</h3>
                            <div>{actions}</div>
                            </header>
                            <div className="card__body">{children}</div>
                            </section>
                            );
                            }

Pattern “slots” : tu passes des éléments React en props (actions) → très flexible sans complexité.

Exemple minimal

class CounterLegacy extends React.Component {
                            state = { count: 0 };

                            componentDidMount() {
                            // side effects (subscribe / fetch...)
                            }

                            componentWillUnmount() {
                            // cleanup
                            }

                            render() {
                            return (
                            <div>
                            <p>{this.state.count}</p>
                            <button onClick={() => this.setState({ count: this.state.count + 1 })}>
                            +1
                            </button>
                            </div>
                            );
                            }
                            }

Lifecycle : mapping mental vers hooks

1) Séparer “container” et “presentational”

function UsersPage(){
                            const { data, isLoading } = useUsers();   // data + side effects
                            if(isLoading) return <Spinner />;
                            return <UsersList users={data} />;        // UI pure-ish
                            }

• Container : data, appels API, orchestration.
• Presentational : UI pure, props → JSX.

2) Custom hooks = réutilisation réelle

function useDebouncedValue(value, ms){
                            const [v, setV] = React.useState(value);
                            React.useEffect(() => {
                            const t = setTimeout(() => setV(value), ms);
                            return () => clearTimeout(t);
                            }, [value, ms]);
                            return v;
                            }

3) API stable (ergonomie)

• Props simples + defaults.
• Éviter “god-components” avec 25 props.
• Nommer props comme une API produit : onClose, isOpen, variant.

4) Inversion of control (slots)

<Card
                            title="Billing"
                            actions={<Button variant="ghost">Export</Button>}
                            >
                            <BillingTable />
                            </Card>

Anti-patterns

• God component : 800 lignes, tout mélangé (data + UI + effects).
• State dupliqué : même info stockée à plusieurs endroits.
• Props drilling extrême : 8 niveaux de props inutiles (solution : context/store, mais avec mesure).
• Effects mal cadrés : deps incorrectes → loops, sur-fetch, fuite mémoire.

Perf : leviers réels

• Découper composants pour limiter rerenders “en cascade”.
• Virtualiser les longues listes (1000+ rows).
• Éviter re-mount (keys stables).
• Profiler avant d’ajouter memo/useMemo/useCallback.

Règle senior:
                            Profiler → identifier hotspot → optimiser
                            Pas l’inverse.

Sans destructuring

function Badge(props){
                            return <span>{props.label}</span>;
                            }

Avec destructuring (recommandé)

function Badge({ label }){
                            return <span>{label}</span>;
                            }

Utilisation côté parent

<Card>
                            <h3>Titre</h3>
                            <p>Contenu libre</p>
                            </Card>

Implémentation côté composant

function Card({ children }){
                            return (
                            <section className="card">
                            {children}
                            </section>
                            );
                            }

Parent

function App(){
                            const [count, setCount] = React.useState(0);

                            return (
                            <Counter
                            value={count}
                            onIncrement={() => setCount(c => c + 1)}
                            />
                            );
                            }

Enfant

function Counter({ value, onIncrement }){
                            return (
                            <div>
                            <p>{value}</p>
                            <button onClick={onIncrement}>+1</button>
                            </div>
                            );
                            }

Objets & tableaux

function UserList({ users }){
                            return (
                            <ul>
                            {users.map(u => (
                            <li key={u.id}>{u.name}</li>
                            ))}
                            </ul>
                            );
                            }

Attention aux références : si users change à chaque render, le composant re-rendera (souvent OK, parfois à mesurer).

Render props (pattern avancé)

function DataFetcher({ render }){
                            const data = { value: 42 };
                            return render(data);
                            }

                            // Usage
                            <DataFetcher render={(d) => <span>{d.value}</span>} />

Moins utilisé aujourd’hui (souvent remplacé par hooks), mais important à comprendre.

TypeScript (recommandé)

type ButtonProps = {
                            variant?: "primary" | "secondary";
                            disabled?: boolean;
                            onClick: () => void;
                            };

                            function Button({ variant = "primary", disabled, onClick }: ButtonProps){
                            return (
                            <button disabled={disabled} onClick={onClick}>
                            OK
                            </button>
                            );
                            }

PropTypes (legacy JS)

Button.propTypes = {
                            variant: PropTypes.string,
                            disabled: PropTypes.bool,
                            onClick: PropTypes.func.isRequired,
                            };

PropTypes reste utile en JS pur, mais TS est devenu le standard.

Bonnes pratiques

• API de props minimale et cohérente.
• Préférer children / slots à des flags multiples.
• Documenter implicitement via types et noms clairs.

Props drilling

Passer une prop sur 6 niveaux est parfois un smell. Solutions possibles : lifting, composition, context (avec parcimonie).

Pièges

• Muter un objet reçu en prop (❌).
• Multiplier les booléens : isSmall, isDark, isRounded…
• Props trop génériques (data, config fourre-tout).

Exemple simple

import { useState } from "react";

                            function Counter(){
                            const [count, setCount] = useState(0);

                            return (
                            <div>
                            <p>{count}</p>
                            <button onClick={() => setCount(count + 1)}>+1</button>
                            </div>
                            );
                            }

Ce qui se passe

1. Premier render → count = 0
2. Clic → setCount(1)
3. React déclenche un nouveau render
4. UI reflète la nouvelle valeur

❌ Mauvais (mutation directe)

const [user, setUser] = useState({ name: "Alice", age: 30 });

                            const birthday = () => {
                            user.age += 1;      // mutation
                            setUser(user);     // même référence
                            };

React peut ne pas re-render → bug silencieux.

✅ Bon (copie immuable)

const [user, setUser] = useState({ name: "Alice", age: 30 });

                            const birthday = () => {
                            setUser({
                            ...user,
                            age: user.age + 1
                            });
                            };

❌ Problème potentiel

setCount(count + 1);
                            setCount(count + 1); // peut rester à +1

✅ Fonction de mise à jour

setCount(prev => prev + 1);
                            setCount(prev => prev + 1); // +2 garanti

State local

• Utilisé par un seul composant
• Ex: toggle, input, dropdown

State levé (lifting state up)

• Partagé par plusieurs enfants
• Vit dans le parent commun

1) State minimal

• Ne stocker que la donnée source.
• Dériver le reste au render.

// ❌ inutile
                            const [fullName, setFullName] = useState("Alice Doe");

                            // ✅ mieux
                            const fullName = `${firstName} ${lastName}`;

2) Séparer logique & UI

function useCounter(){
                            const [count, setCount] = useState(0);
                            const inc = () => setCount(c => c + 1);
                            return { count, inc };
                            }

Les hooks custom encapsulent la logique de state.

Pièges

• Muter le state directement
• Dupliquer la même donnée dans plusieurs states
• setState en boucle infinie (via effects)
• État trop profond (objets imbriqués complexes)

Checklist rapide

• Le state est-il minimal ?
• Immuable à chaque update ?
• Bon niveau dans l’arbre ?
• Fonctionnelle si dépendance à l’ancien state ?

Cas d’usage typiques

• Chargement initial de données
• Initialisation d’une lib externe
• Abonnement global (avec cleanup)

Attention (React Strict Mode)

En mode développement, React peut exécuter l’effet deux fois pour détecter les effets non idempotents.

Que mettre dans les deps ?

• Toutes les variables utilisées dans l’effet
• Props et state référencés
• Fonctions non stables (sauf memo)

Erreur fréquente

// ❌ dépendance manquante
                            useEffect(() => {
                            doSomething(value);
                            }, []); // value utilisé mais absent

Bug subtil : effet non synchronisé avec le state réel.

À nettoyer absolument

• Timers (setInterval, setTimeout)
• WebSocket / EventSource
• Event listeners (addEventListener)

Règle senior

Si tu t’abonnes → tu te désabonnes.

Bon réflexe

• Corriger l’effet plutôt que désactiver la règle
• Extraire la logique dans une fonction stable
• Utiliser useCallback si nécessaire

❌ Mauvaise pratique

// eslint-disable-next-line react-hooks/exhaustive-deps
                            useEffect(() => {
                            doSomething(value);
                            }, []);

Acceptable uniquement si tu maîtrises parfaitement l’impact.

Pièges

• Mettre trop de logique dans un seul effect
• Oublier le cleanup
• Dépendances incomplètes
• Effet qui modifie le state déclenchant lui-même

Checklist rapide

• Est-ce vraiment un effet ?
• Dépendances complètes et correctes ?
• Cleanup présent si abonnement ?
• Effet idempotent ?

Input contrôlé

function NameInput(){
                            const [name, setName] = React.useState("");

                            return (
                            <input
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                            placeholder="Votre nom"
                            />
                            );
                            }

Pourquoi c’est puissant

• Validation instantanée
• Formatage automatique
• Synchronisation UI / data

1) Un state par formulaire

• Évite la multiplication de useState
• Facilite reset / validation

2) Validation dérivée

const isValid = email.includes("@") && password.length > 8;

3) Soumission async

const handleSubmit = async (e) => {
                            e.preventDefault();
                            setLoading(true);
                            await api.login(form);
                            setLoading(false);
                            };

❌ Non contrôlé sans raison

<input defaultValue="test" />

OK uniquement pour formulaires très simples / legacy.

❌ Handler lourd inline

<button onClick={() => doA(); doB(); doC();}>

Préférer une fonction dédiée.

Exemple simple

function TodoList({ todos }){
                            return (
                            <ul>
                            {todos.map(t => (
                            <li key={t.id}>{t.text}</li>
                            ))}
                            </ul>
                            );
                            }

Return implicite (style concis)

{todos.map(t => (
                            <TodoRow key={t.id} todo={t} />
                            ))}

Filtrer + mapper (pattern courant)

{todos
                            .filter(t => t.done)
                            .map(t => (
                            <li key={t.id}>{t.text}</li>
                            ))}

Rendu “empty” propre

{todos.length === 0
                            ? <EmptyState title="Aucune tâche" />
                            : <TodoList todos={todos} />}

✅ Bonne key

<li key={todo.id}>...</li>

• Stable : ne change pas si la liste est triée/filtrée
• Unique : pas de duplication
• Idéal : ID base de données / UUID / slug

❌ Anti-pattern : key=index

{todos.map((t, i) => (
                            <TodoRow key={i} todo={t} />
                            ))}

Ne pas utiliser l’index si la liste peut bouger (tri, suppression au milieu, insertion).

Symptômes : inputs qui changent de valeur, focus qui saute, animations incohérentes, state mélangé entre lignes.

Loading UX

• Skeletons > spinner (perception de vitesse)
• Conserver layout pour éviter “layout shift”

Error UX

• Message clair + action (Retry)
• Logs / monitoring (en prod)

1) Render helper (fonction locale)

function Panel({ items, loading }){
                            const renderBody = () => {
                            if (loading) return <Spinner />;
                            if (items.length === 0) return <Empty />;
                            return <List items={items} />;
                            };

                            return <section>{renderBody()}</section>;
                            }

2) Extraire en composants

return (
                            <section>
                            <Header />
                            <ListOrEmpty items={items} />
                            </section>
                            );

Si ton composant mélange trop de branches de rendu, extraire = meilleur refactor “ROI”.

1) Ternaires imbriqués

// ❌ illisible
                            {a ? (b ? <X/> : <Y/>) : (c ? <Z/> : <W/>)}

✅ Solution : early return / variable / composants.

2) Keys instables

// ❌ remount à chaque render
                            <Row key={Math.random()} />

3) map sans return (piège JS)

// ❌ { } nécessite un return explicite
                            {items.map(i => {
                            <li key={i.id}>{i.name}</li>
                            })}

                            // ✅
                            {items.map(i => (
                            <li key={i.id}>{i.name}</li>
                            ))}

4) Rendu de “falsy” inattendu

// "" rend rien (OK) mais 0 s'affiche
                            {value && <Tag />}

Client centralisé

// api/client.ts
                            import axios from "axios";

                            export const api = axios.create({
                            baseURL: "/api",
                            timeout: 5000,
                            });

                            api.interceptors.response.use(
                            res => res,
                            err => Promise.reject(err.response?.data || err)
                            );

Utilisation

const { data } = await api.get("/articles");
                            setArticles(data);

Très utile pour auth JWT, headers globaux, retry custom.

Query simple

import { useQuery } from "@tanstack/react-query";

                            const fetchArticles = async () => {
                            const res = await fetch("/api/articles");
                            if (!res.ok) throw new Error("API error");
                            return res.json();
                            };

                            function Articles(){
                            const { data, isLoading, error } = useQuery({
                            queryKey: ["articles"],
                            queryFn: fetchArticles,
                            });

                            if (isLoading) return <Skeleton />;
                            if (error) return <ErrorBox />;
                            return <ArticleList items={data} />;
                            }

Ce que React Query apporte

• Cache automatique
• Refetch au focus / reconnect
• Déduplication des requêtes
• Pagination & infinite queries

Organisation

• services/api.ts (clients HTTP)
• queries/*.ts (hooks React Query)
• Composants = UI uniquement

Exemple hook dédié

// queries/useArticles.ts
                            export const useArticles = () =>
                            useQuery({
                            queryKey: ["articles"],
                            queryFn: fetchArticles,
                            });

Link

import { Link } from "react-router-dom";

                            <nav>
                            <Link to="/">Accueil</Link>
                            <Link to="/about">À propos</Link>
                            </nav>

NavLink (active state)

import { NavLink } from "react-router-dom";

                            <NavLink
                            to="/about"
                            className={({ isActive }) => isActive ? "nav-item active" : "nav-item"}
                            >
                            À propos
                            </NavLink>

Pratique pour mettre en surbrillance l’onglet actif dans un menu.

404 (catch-all)

<Route path="*" element={<NotFound />} />

Redirection

import { Navigate } from "react-router-dom";

                            <Route path="old" element={<Navigate to="/new" replace />} />

Route protégée (auth guard)

import { Navigate, Outlet } from "react-router-dom";

                            function RequireAuth({ isAuthed }){
                            if (!isAuthed) return <Navigate to="/login" replace />;
                            return <Outlet />;
                            }

                            // Usage
                            <Route element={<RequireAuth isAuthed={isAuthed} />}>
                            <Route path="dashboard" element={<Dashboard />} />
                            </Route>

Bonnes pratiques

• Routes par feature (pages regroupées par domaine).
• Layout + routes imbriquées (Outlet) = structure claire.
• Utiliser NavLink pour l’état “actif”.
• Gérer 404 / loading / error proprement.

Code splitting (lazy)

import { lazy, Suspense } from "react";

                            const Settings = lazy(() => import("./pages/Settings"));

                            <Route
                            path="settings"
                            element={
                            <Suspense fallback={<Spinner />}>
                            <Settings />
                            </Suspense>
                            }
                            />

Pièges fréquents

• <a href> au lieu de <Link> → reload complet.
• Oublier le fallback serveur → 404 au refresh.
• Routes trop plates (pas de Layout) → duplication de wrappers.
• Paramètres non validés (IDs) → erreurs silencieuses.

Quand utiliser Context ?

• Utilisateur authentifié
• Thème (dark/light)
• Langue / i18n
• Permissions / rôles

Quand éviter ?

• Données très locales
• Données très volatiles (perf)
• State complexe avec logique lourde

1) Custom hook

export const useAuth = () => {
                            const ctx = useContext(AuthContext);
                            if (!ctx) throw new Error("useAuth must be used in AuthProvider");
                            return ctx;
                            };

Simplifie l’import et sécurise l’usage.

2) Context découpés

• AuthContext
• ThemeContext
• SettingsContext

Évite un “God Context” gigantesque.

Pièges

• Mettre tout le state global dans un seul Context
• Utiliser Context pour chaque petit state
• Oublier le Provider → null

Checklist

• Évite-t-il vraiment le prop drilling ?
• Valeur stable / memo si besoin ?
• Context limité à un domaine clair ?

Redux

• Un slice par domaine métier
• Sélecteurs mémorisés
• Async via RTK Query

Zustand

• Store par feature
• State + actions ensemble
• Pas de “God store”

Pièges

• Tout mettre dans le store global
• Dupliquer le server state
• Reducers trop génériques

Checklist

• Le state est-il vraiment global ?
• Server state séparé ?
• Sélecteurs précis ?

Checklist QA

• Routage (refresh sur /route)
• 404 (page not found) & redirections
• Console propre (pas d’erreurs)
• Env vars (API URL) correctes

Conseil “pro”

• Build + lint + tests en CI
• Build “reproductible” (lockfile)
• Preview deploy (PR previews sur Vercel/Netlify)

Configuration typique

• Build command : npm run build
• Output directory : dist
• Node version : fixée (ex: 18/20) via settings
• Env vars : dans le dashboard (prod/staging)

SPA routing (très important)

React Router gère les routes côté client. Il faut une règle “fallback to index.html”.

# Netlify: _redirects (dans /public ou dist selon setup)
                            /*  /index.html  200

# Vercel (concept)
                            toute route -> index.html (SPA)

Run

docker build -t react-app .
                            docker run -p 8080:80 react-app

Pourquoi Docker ici ?

• Build reproductible
• Déploiement simple (K8s, Swarm, ECS)
• Rollback facile

Perf & cache

• Assets hashés : cache long (immutable)
• HTML : cache court (ou no-cache)
• Compression : gzip/brotli (selon infra)
• Code splitting (lazy routes)
• Images optimisées + lazy loading

Sourcemaps

• Utile pour debugging (Sentry, etc.)
• À contrôler selon politique sécurité

Sécurité (headers)

• CSP (Content-Security-Policy) si possible
• HSTS en HTTPS
• X-Content-Type-Options nosniff
• Referrer-Policy