Les erreurs courantes en JS

// Le bug
const user = undefined
console.log(user.name) // TypeError !

// Le fix 1 : optional chaining
console.log(user?.name) // undefined (pas d'erreur)

// Le fix 2 : verifier avant
if (user) {
  console.log(user.name)
}

// Le fix 3 : valeur par defaut
const name = user?.name ?? "Inconnu"

// Le bug : data est null avant le fetch
const [articles, setArticles] = useState(null)
// ...
return articles.map(a => <div>{a.title}</div>) // TypeError !

// Le fix 1 : initialiser avec un tableau vide
const [articles, setArticles] = useState<Article[]>([])

// Le fix 2 : guard clause
return articles?.map(a => <div key={a.id}>{a.title}</div>) ?? <p>Chargement...</p>

// Le bug : faute de frappe
const userName = "Alice"
console.log(usrName) // ReferenceError: usrName is not defined

// Le bug : import oublie
export function MyComponent() {
  return <Button>Cliquer</Button> // ReferenceError si Button n'est pas importe
}

// Le fix : verifier l'import et l'orthographe
import { Button } from "@/components/ui/button"
console.log(userName) // OK

// Le bug
const user = { name: "Alice", email: "alice@mail.com" }
return <p>{user}</p> // Error: Objects are not valid as a React child

// Le fix : afficher une propriete, pas l'objet entier
return <p>{user.name}</p>

// Ou pour debugger : JSON.stringify
return <pre>{JSON.stringify(user, null, 2)}</pre>

// Le warning
users.map(user => <UserCard user={user} />) // Warning: Each child...

// Le fix : ajouter une key unique
users.map(user => <UserCard key={user.id} user={user} />)

// JAMAIS : utiliser l'index comme key si la liste change
// users.map((user, i) => <UserCard key={i} user={user} />) // Mauvaise idee !

// Le bug : setState appele a chaque render
function Counter() {
  const [count, setCount] = useState(0)
  setCount(count + 1) // BOUM ! Boucle infinie
  return <p>{count}</p>
}

// Le fix : mettre dans un useEffect ou un handler
function Counter() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(c => c + 1)}>
      {count}
    </button>
  )
}

// Le bug : oubli du await
async function getUser() {
  const response = fetch("/api/user") // Oubli du await !
  const data = response.json() // TypeError: response.json is not a function
  return data
}

// Le fix : await a chaque etape
async function getUser() {
  const response = await fetch("/api/user")
  const data = await response.json()
  return data
}