react

Spécificité

React est déclaratif
Un composant React doit commencer par une majuscule sinon c'est une balise HTML
Un composant React est une fonction et ses paramètres sont appelés props
On écrit du JSX qui est un mélange de HTML et de JavaScript
Un ensemble de composants doivent être entouré par une balise ou un Fragment (<>...</>)
Une balise auto fermante en HTML5 doit être fermée, ie : <br />, <input />
class devient className
for devient htmlFor
Il faut ajouter l'attribut key sur la première balise contenue dans une boucle pour que React sache la différentier des autres lors d'un re-render
React comprend que null ou undefined n'affichent rien (souvent utiliser dans un ternaire)
Utiliser <Link> pour ne pas recharger la page sinon <a> quand c'est un lien externe ou e-mail avec React Router
Respecter la pureté d'un composant
Ne pas utiliser React tout seul mais avec un framework
Les fonctions dont le nom commence par use sont appelées hooks
Les hooks et composants doivent être purs
En mettant 'use client', le composant et tous ses imports sont rendu côté client
- doit être mis quand il y a un hook ou un onXXX
- par contre, son children reste server component
Les composants sont des server component par défaut

Ne pas appeler les hooks à l’intérieur de boucles, de code conditionnel ou de fonctions imbriquées ;
React se repose sur l’ordre dans lequel les Hooks sont appelés ;
Frustrations with React Hooks.

// Affiche le log à chaque fois que le composant est affiché ET mis à jour
useEffect(() => {
  console.log('MAJ')
})

// Affiche le log uniquement à l'affichage du composant
useEffect(() => {
  console.log('MAJ')
}, [])

// Affiche le log à l'affichage et à chaque mise à jour du state/props
useEffect(() => {
  console.log('MAJ')
}, [unState, ouUneProps])

Renvoie une fonction de rappel mémoïsée ;
- La mémoïsation est la mise en cache des valeurs de retour d'une fonction selon ses valeurs d'entrée.
useCallback(fn, inputs) est équivalent à useMemo(() => fn, inputs).

Flag bool
- fonctionnel, moins verbeux, mais problème de perf car il attend la réponse de l'API + tests OK
Flag AbortController
- fonctionnel, plus verbeux, il reste un setState dans le finally qui foire mais abord l'appel API + tests OK
- faire un hook custom pour être moins verbeux