Sessiz bir San Francisco ortak çalışma alanında alnımdan terler akarken, basit bir API çağrısı için 200 satır Redux kalıbını sildim — ve uygulama yeniden nefes aldı.
React projelerinde yaptığım değişiklik her şeyi dönüştürdü. Daha fazla hook ya da pattern eklemek değil. Hayır. Çıkarmak. Acımasızca.
Asıl aydınlanma? “Bakımı kolay React kodu yazmak, en iyi uygulamaları takip etmekle ilgili değil. Hangi uygulamaları bırakacağını bilmekle ilgili.”
Bakımı kolay React kodu yazmak, en iyi uygulamaları takip etmekle ilgili değil. Hangi uygulamaları bırakacağını bilmekle ilgili.
İşte kanca bu. Ve lanet olsun, tam oturdu.
Sunucu Durumu İçin Neden Redux Beni Bitiriyordu
Şu sahneyi düşün: Her API çekimi bir canavar doğuruyor. Üç aksiyon tipi. Bir async thunk. Reducer durumları. Seçiciler. Component’lerde useDispatch, useSelector cehennemi. Kampanyaları listelemek için 200+ satır.
İşte cepheden öncesi:
// 3 aksiyon tipi, 1 aksiyon yaratıcısı, 1 reducer, 2 seçici...
const FETCH_CAMPAIGNS_REQUEST = "FETCH_CAMPAIGNS_REQUEST";
// ... (anladın zaten)
Bağlamak? Sayfa değişiminde dispatch eden bir useEffect. Yüklenme durumları dağınık. Hatalar gömülü.
Sonra SWR. On beş satır. Bir hook. Güncellemelerde mutate. Suspense hazır. Önbellekleme? Otomatik. Stale-while-revalidate? Dahil.
const { data: campaigns, error, isLoading } = useSWR('/campaigns?page=' + page);
İyileşme? Çekim mantığı component’lerden kayboldu. Bundle boyutu %15 küçüldü. Hata ayıklama? Sorun değil — SWR’ın geliştirici araçları her şeyi gösteriyor.
Ama benim özgün bakışım: Sunucu durumu için Redux, erken web geliştirmede jQuery’nin pençesini andırıyor. Herkes her sorunu onunla çözerken, fetch() ve kütüphaneler ‘Yok artık’ dedi. React’in bir sonraki değişimi? Server Components çoğu istemci tarafı durum makinesini tamamen yok edecek.
useEffect Zincirleri Hâlâ Değer mi?
useEffect zincirleri. Component başına beşi. Biri çekim için. Biri iyimser güncellemeler için. Biri abonelikler için. Temizlik? Kabuslar.
Anında durdum. useReducer + Zustand gibi minicik bir kütüphane ile tek reducer pattern’ına geçtim (provider kalıbı yok). Ya da daha iyisi: Sorgular/mutasyonlar için TanStack Query.
Neden? Effect’ler birleşmiyor. Çatışıyorlar — bayat kapamalar, deps yanlışsa sonsuz döngüler. Reducer merkezileştiriyor. Tek gerçek kaynak.
Platformumda? Konuşmalar modülü 8 effect’ten 2 Query hook’una indi. Yeniden render’lar yarıya düştü. Yarış koşulları? Yok oldu.
Bak, React belgeleri effect’leri ‘yan etki kralı’ diye satıyor ama bu 2018 kafası. Mimari sorguları birinci sınıf yapıyor.
Kısa paragraf. Acı gerçek.
Prop Drilling: Doğuştan Ölü
Sekiz seviye derine prop geçmek. App’ten Footer tooltip’ine userId. Her yeniden yapılandırma? Prop selini yeniden yapılandır.
Öldürdüm. Context? Evet, ama seyrek — sadece kurum çapında şeyler. Component’ler? Hafif bir depodan hook’larla tüketiyor.
Jotai ya da Valtio. Atom tabanlı. Her yerde context provider yok. Cerrahi abone ol.
const userId = useAtom(userAtom);
Çoklu kurum izinleri? Org başına bir atom. Ölçeklenir. ‘Context cehennemi’ yok.
Sıradan Şeyler İçin Özel Hook’lar
useFetchUser. usePaginateList. useOptimisticUpdate. Tekerleği yeniden icat etmek.
Durdum. Kütüphaneler bunun efendisi: Veri için React Query/SWR. Animasyonlar için Framer Motion. Kafalar için Headless UI.
Kod tabanım? Hook sayısı 45’ten 12’ye indi. Hepsi savaşta test edilmiş. Hatalar? Neredeyse sıfır.
Kurumsal abartı uyarısı: Facebook’un ‘hook’lar kompozisyonu düzeltiyor’ iddiası, kütüphane ekosisteminin patlama sebebini görmezden geliyor.
Satır İçi Stiler ve Emotion Aşırılığı
CSS-in-JS şişkinliği. Emotion önbellekleri. Bundle kabarması.
Tailwind + saf CSS modüllere geçtim. Utility sınıfları. Sıfır runtime.
Uygulama yüklenme süresi? Mobilde %40 daha hızlı. Tree-shake edilebilir. Teman? CSS değişkenleri.
