Forem: ahmed SENEINA

useEffect Boucle Infinie en React : 5 Causes et Comment les Corriger

ahmed SENEINA — Sun, 12 Apr 2026 06:37:56 +0000

Ta console explose de logs, ton navigateur ralentit, l'onglet freeze — tu es face à une boucle infinie useEffect. C'est le bug React le plus frustrant pour les débutants. Voici les 5 causes et comment les corriger.

Comment détecter une boucle infinie

Console qui spam : des centaines de logs identiques
Erreur React : Too many re-renders.
Navigateur qui rame : 100% CPU
Network : dizaines de fetch identiques

Cause 1 : Pas de tableau de dépendances

// ❌ S'exécute à CHAQUE rendu
useEffect(() => {
  fetch('/api/data').then(r => r.json()).then(setData);
}); // pas de []

// ✅ Une seule fois au montage
useEffect(() => {
  fetch('/api/data').then(r => r.json()).then(setData);
}, []); // tableau vide

Cause 2 : setState avec la valeur dans les deps

// ❌ count change → useEffect → setCount → 💥
const [count, setCount] = useState(0);
useEffect(() => {
  setCount(count + 1);
}, [count]);

// ✅ Forme fonctionnelle
useEffect(() => {
  const timer = setInterval(() => {
    setCount(prev => prev + 1);
  }, 1000);
  return () => clearInterval(timer);
}, []);

Cause 3 : Objet/array dans les dépendances

// ❌ Nouvel objet à chaque rendu = nouvelle référence
const options = { query, limit: 10 };
useEffect(() => {
  fetchResults(options);
}, [options]); // 💥

// ✅ Dépendre des primitives
useEffect(() => {
  fetchResults({ query, limit: 10 });
}, [query]); // string = stable

Cause 4 : Fonction qui recrée un objet

// ❌
useEffect(() => {
  fetch(\`/api?\${new URLSearchParams(getFilters())}\`);
}, [getFilters()]); // nouvel objet = 💥

// ✅ Constante
const FILTERS = { category: 'tech' };
useEffect(() => {
  fetch(\`/api?\${new URLSearchParams(FILTERS)}\`);
}, []);

Cause 5 : Fetch → setState → re-render → fetch

// ❌ url change dans l'effet qui dépend de url
useEffect(() => {
  fetch(url).then(r => r.json()).then(result => {
    setData(result);
    setUrl(result.nextPage); // change url → relance 💥
  });
}, [url]);

// ✅ url ne change que sur action utilisateur
useEffect(() => {
  fetch(url).then(r => r.json()).then(setData);
}, [url]);
const loadMore = () => setUrl(data.nextPage); // clic

La règle d'or

Si tu peux calculer une valeur sans useEffect, ne l'utilise pas.

// ❌ useEffect pour du state dérivé
useEffect(() => {
  setTotal(items.reduce((s, i) => s + i.price, 0));
}, [items]);

// ✅ Calcul direct
const total = items.reduce((s, i) => s + i.price, 0);

Article original sur gogokodo.com

Cannot Read Property of Undefined en JavaScript : 7 Causes et Solutions

ahmed SENEINA — Fri, 10 Apr 2026 08:22:27 +0000

Tu as cette erreur dans la console : TypeError: Cannot read properties of undefined (reading 'xxx'). C'est l'erreur JavaScript la plus fréquente au monde. Elle signifie que tu essaies d'accéder à une propriété sur une valeur qui est undefined. Voici les 7 causes les plus courantes — et comment les corriger.

1. Objet non initialisé

// ❌ user est undefined
let user;
console.log(user.name); // TypeError!

// ✅ Initialiser l'objet
let user = { name: 'Ali', age: 25 };
console.log(user.name); // 'Ali'

// ✅ Ou vérifier avant d'accéder
if (user) {
  console.log(user.name);
}

2. Élément DOM qui n'existe pas

querySelector retourne null si l'élément n'est pas trouvé.

// ❌ L'élément n'existe pas dans le HTML
const btn = document.querySelector('#mon-bouton');
btn.addEventListener('click', handler); // TypeError!

// ✅ Vérifier que l'élément existe
const btn = document.querySelector('#mon-bouton');
if (btn) {
  btn.addEventListener('click', handler);
}

3. Donnée asynchrone pas encore arrivée

// ❌ data est undefined au premier rendu
const [data, setData] = useState();
return <p>{data.name}</p>; // TypeError!

// ✅ Optional chaining
return <p>{data?.name ?? 'Inconnu'}</p>;

4. Faute de frappe dans le nom de propriété

const user = { name: 'Ali', email: 'ali@mail.com' };

// ❌ 'emial' au lieu de 'email'
console.log(user.emial.toUpperCase()); // TypeError!

// ✅ Vérifier les noms
console.log(user.email.toUpperCase()); // 'ALI@MAIL.COM'

5. Oublier le return dans map/find

const users = [{ id: 1, name: 'Ali' }, { id: 2, name: 'Sara' }];

// ❌ find ne trouve rien → undefined
const user = users.find(u => u.id === 99);
console.log(user.name); // TypeError!

// ✅ Vérifier le résultat
const user = users.find(u => u.id === 99);
if (user) {
  console.log(user.name);
}

6. Déstructurer un objet undefined

// ❌ Si getUser() retourne undefined
const { name, email } = getUser(); // TypeError!

// ✅ Valeur par défaut
const { name, email } = getUser() ?? {};

7. Accéder à un objet imbriqué profondément

// ❌ user est null → crash
console.log(response.data.user.address.city); // TypeError!

// ✅ Optional chaining (?.)
console.log(response.data.user?.address?.city); // undefined (pas de crash)

// ✅ Avec valeur par défaut
const city = response.data.user?.address?.city ?? 'Non renseignée';

Comment debugger

Lire le message : Cannot read properties of undefined (reading 'name') → la variable AVANT .name est undefined
console.log juste avant la ligne qui crash
Remonter la chaîne : si a.b.c crash, vérifier a, puis a.b, puis a.b.c

Résumé

Cause	Solution rapide
Variable non initialisée	`let x = {}`
Élément DOM absent	`if (el) { ... }`
Donnée async pas prête	Loading state + optional chaining
Faute de frappe	TypeScript ou linter
find() sans résultat	Vérifier avant d'accéder
Déstructuration unsafe	`?? {}` par défaut
Objet imbriqué	Optional chaining `?.`

Article original sur gogokodo.com

Erreur CORS Bloqué : Comprendre et Résoudre en 5 Minutes

ahmed SENEINA — Fri, 10 Apr 2026 08:21:38 +0000

Tu fais un fetch() vers une API et le navigateur te répond : "Access to fetch has been blocked by CORS policy". Ton code est correct, l'API fonctionne dans Postman, mais le navigateur refuse. Voici pourquoi et comment résoudre ça en 5 minutes.

C'est quoi CORS en 30 secondes ?

CORS (Cross-Origin Resource Sharing) est une sécurité du navigateur. Par défaut, le navigateur interdit à une page web de faire des requêtes vers un domaine différent du sien.

✅ gogokodo.com → gogokodo.com/api    (même origine)
❌ gogokodo.com → api.exemple.com      (origine différente)
❌ localhost:3000 → localhost:8080      (port différent = origine différente)

Une "origine" = protocole + domaine + port. Si un seul diffère, le navigateur bloque.

Important : c'est le navigateur qui bloque, pas le serveur. C'est pourquoi ça marche dans Postman (pas de navigateur) mais pas dans ton code.

Les 3 erreurs CORS les plus fréquentes

1. "No 'Access-Control-Allow-Origin' header"

La plus courante. Le serveur ne renvoie pas le header qui autorise ta requête.

Access to fetch at 'https://api.exemple.com/data' 
from origin 'http://localhost:3000' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

Solution serveur (Node/Express) :

const cors = require('cors');
app.use(cors()); // Autorise toutes les origines

// Plus sécurisé — autoriser une origine spécifique
app.use(cors({
  origin: 'https://monsite.com'
}));

2. "CORS preflight request failed"

Pour certaines requêtes (POST avec JSON, PUT, DELETE), le navigateur envoie d'abord une requête OPTIONS ("preflight") pour demander la permission.

// Cette requête déclenche un preflight
fetch('https://api.exemple.com/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Ali' })
});

Solution : le serveur doit répondre aux requêtes OPTIONS.

app.use(cors({
  origin: 'https://monsite.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

3. "Credentials flag is true but..."

Tu envoies des cookies mais le serveur n'est pas configuré pour ça.

// Front
fetch('https://api.exemple.com/data', {
  credentials: 'include'
});

// Serveur — doit autoriser les credentials
app.use(cors({
  origin: 'https://monsite.com', // ⚠️ Pas '*' avec credentials
  credentials: true
}));

Solution côté front (quand tu ne contrôles pas le serveur)

Proxy en développement (Vite)

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://api.exemple.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

// Ton code — plus de CORS !
fetch('/api/data'); // → proxy vers api.exemple.com/data

Proxy en production

Crée une route API sur TON serveur qui fait la requête vers l'API tierce :

app.get('/api/proxy/data', async (req, res) => {
  const response = await fetch('https://api.exemple.com/data');
  const data = await response.json();
  res.json(data);
});

Ce qu'il ne faut PAS faire

❌ Désactiver la sécurité du navigateur (--disable-web-security)
❌ Utiliser un proxy CORS public (risque sécurité)
❌ Mettre Access-Control-Allow-Origin: * sur une API avec authentification

Résumé

Situation	Solution
Tu contrôles le serveur	`cors()` middleware
API tierce en dev	Proxy Vite/Webpack
API tierce en prod	Route proxy sur ton serveur
Requêtes avec cookies	`credentials: true` + origine explicite

Article original publié sur gogokodo.com