React hydration hatası neden oluşur?

Hydration nasıl çalışır?​

1. Sunucu, bileşeni çalıştırır ve tarayıcıya başlangıç HTML’sini gönderir.
2. Tarayıcı bu HTML’yi ekranda gösterir.
3. JavaScript paketi yüklendiğinde React aynı bileşeni istemcide ilk kez çalıştırır.
4. React, istemci çıktısını mevcut HTML ile eşleştirerek olay dinleyicilerini ve bileşen davranışını bağlar.

En yaygın nedenler​

• Math.random() veya Date.now() gibi her çalıştırmada değişen değerleri JSX içinde doğrudan kullanmak.
• Tarih ve sayı biçimlendirmesini sunucuda ve tarayıcıda farklı yerel ayarlarla yapmak.
• window, document, localStorage veya ekran bilgisi gibi yalnızca tarayıcıda bulunan API’leri render sırasında okumak.
• Çerez, oturum, kimlik doğrulama veya kullanıcı tercihlerinin sunucuya ve istemciye farklı ulaşması.
• Geçersiz HTML iç içeliği oluşturmak; örneğin bir p elemanının içine uygun olmayan blok elemanları yerleştirmek.
• Hydration başlamadan önce veya sırasında bir tarayıcı eklentisinin ya da üçüncü taraf kodun sunucu HTML’sini değiştirmesi.

Somut örnek ve doğru düzeltme​

function RandomNumber() {
  return <p>Numara: {Math.random()}</p>;
}

import { useEffect, useState } from 'react';

function RandomNumber() {
  const [number, setNumber] = useState(null);

  useEffect(() => {
    setNumber(Math.random());
  }, []);

  return <p>Numara: {number ?? 'Hesaplanıyor...'}</p>;
}

Hatanın kaynağını bulma ve düzeltme​

1. Hata mesajındaki bileşen ağacını ve farklı görünen metni belirleyin; doğrudan tüm hydration uyarısını gizlemeyin.
2. İlgili render kodunda Date, Math.random(), window, document, localStorage ve kullanıcıya bağlı koşulları arayın.
3. İlk render’ı deterministik yapın: aynı başlangıç prop’larını, sabit bir placeholder’ı veya sunucudan aktarılan veriyi kullanın.
4. Tarayıcıya özel işlemleri useEffect içine taşıyın. İlk çıktının sunucu ile istemcide yine aynı kaldığını kontrol edin.
5. Tarih ve sayı biçimlendirmesinde aynı veri ve açık biçimlendirme ayarlarını kullanın; mümkünse biçimlendirilmiş sonucu sunucudan gönderin.
6. HTML elemanlarının doğru iç içe olduğunu doğrulayın ve üçüncü taraf bileşenleri geçici olarak kaldırarak farkın kaynağını izole edin.
7. Düzeltmeden sonra üretim derlemesinde de test edin; yalnızca geliştirme ortamında kaybolan uyarıyı çözülmüş kabul etmeyin.

Kaynaklar​

• React DOM: Hydration eşleşmesi
• React: İstemcide çalışan etkiler