StrictMode Detector

Utilities per rilevare se React StrictMode è attivo nell'applicazione.

Componenti e Hook

useStrictModeDetector()

Hook personalizzato che rileva se React StrictMode è attivo analizzando il comportamento di mounting dei componenti.

Come funziona:

• StrictMode in React causa un doppio mounting dei componenti in development mode
• Il pattern è: Mount → Unmount (cleanup) → Remount
• L'hook conta i render, gli effect e i cleanup per rilevare questo comportamento

Ritorna:

interface StrictModeInfo {
    isStrictMode: boolean | null;  // null durante il rilevamento
    debugInfo: string;              // Informazioni sui contatori
    renderCount: number;            // Numero di render
    effectCount: number;            // Numero di esecuzioni di useEffect
    cleanupCount: number;           // Numero di cleanup
}

Esempio di utilizzo:

```typescript
import { useStrictModeDetector } from '@/hooks/utils/useStrictModeDetector';

function MyComponent() {
    const { isStrictMode, debugInfo } = useStrictModeDetector();

    return (
        <div>
            {isStrictMode === null && <p>Rilevamento in corso...</p>}
            {isStrictMode === true && <p>StrictMode è attivo</p>}
            {isStrictMode === false && <p>StrictMode NON è attivo</p>}
            <p className="text-xs">{debugInfo}</p>
        </div>
    );
}

<StrictModeStatus />

Componente UI pronto all'uso che visualizza lo stato di StrictMode con stili appropriati.

Props:

interface StrictModeStatusProps {
    showDebugInfo?: boolean;  // Mostra informazioni di debug (default: false)
}

Esempi di utilizzo:

Uso base

import { StrictModeStatus } from '@/components/StrictModeStatus';

function MyPage() {
    return (
        <div>
            <h1>My Page</h1>
            <StrictModeStatus />
        </div>
    );
}

Con informazioni di debug

import { StrictModeStatus } from '@/components/StrictModeStatus';

function DebugPage() {
    return (
        <div>
            <h1>Debug Info</h1>
            <StrictModeStatus showDebugInfo />
        </div>
    );
}

Import diretto

import { StrictModeStatus } from '@/components/StrictModeStatus';

function WelcomePage() {
    return (
        <div className="p-8">
            <StrictModeStatus showDebugInfo />
        </div>
    );
}

Stili Visuali

Il componente StrictModeStatus mostra:

• Verde quando StrictMode è attivo (✓)
• Giallo quando StrictMode NON è attivo (✗)
• Grigio durante il rilevamento

Supporta automaticamente il dark mode usando le classi Tailwind.

Note Tecniche

Perché il rilevamento è necessario?

In development mode, React StrictMode causa un doppio rendering intenzionale per:

• Rilevare effetti collaterali indesiderati
• Verificare che i componenti siano idempotenti
• Identificare problemi con effetti non puliti

Questo comportamento può confondere durante il debug, quindi è utile sapere quando è attivo.

✅ Best Practice: TanStack Query (NO useRef)

Con TanStack Query, NON serve più usare useRef per prevenire doppi fetch:

// ❌ VECCHIO - con useRef per StrictMode
const hasFetchedRef = useRef(false);

useEffect(() => {
    if (!hasFetchedRef.current) {
        hasFetchedRef.current = true;
        fetchData();
    }
}, []);

// ✅ NUOVO - TanStack Query gestisce automaticamente
const { data, isLoading } = useCompaniesList();
// Nessun useRef, nessun useEffect - tutto automatico!

Perché funziona:

• TanStack Query de-duplica automaticamente le richieste
• La cache previene fetch inutili anche in StrictMode
• Query keys garantiscono che ogni fetch sia unico

Quando usare ancora useRef:

• ✅ Per logica non-fetch (es. broadcast tra tab)
• ✅ Per riferimenti DOM
• ✅ Per valori che non devono triggerare re-render
• ❌ MAI per prevenire doppi fetch API (usa TanStack Query)

Limitazioni

1. Development mode only: Il rilevamento è pensato per development. In production, StrictMode non causa doppi render.

2. Altri fattori: Altri fattori possono causare doppi render (HMR, React Router, etc.), quindi il rilevamento potrebbe non essere sempre accurato al 100%.

3. Timing: Il rilevamento richiede ~100ms per completarsi (usa un timeout interno).

Console Logging

In development mode, l'hook logga informazioni nella console:

[useStrictModeDetector] Effect run: 1 Renders: 2
[useStrictModeDetector] Cleanup: 1
[useStrictModeDetector] Effect run: 2 Renders: 2
[useStrictModeDetector] Result: true Renders: 2, Effects: 2, Cleanups: 1

Questo aiuta a debuggare problemi di rendering.

File Correlati

• app/hooks/useStrictModeDetector.ts - Hook personalizzato
• app/components/StrictModeStatus.tsx - Componente UI
• app/routes/welcome.tsx - Esempio di utilizzo