placeholderData

React 🟡 Mid

Définition

Option TanStack Query qui fournit des données temporaires pendant le chargement initial, sans les stocker dans le cache. Évite le flash de loading.

Analogie

Comme une maquette de vitrine : elle montre la disposition avant que les vrais produits arrivent.

Exemple de code

useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUser(userId),
  placeholderData: (previousData) => previousData,
  // ou: placeholderData: { name: 'Chargement...', email: '' }
});

Cas d'usage

Afficher les données précédentés pendant une transition entre pages ou profils utilisateur.

Termes liés

#data-fetching#ux

← → au clavier pour passer d'une fiche à l'autre