Hook'lara Giriş

Hook’lar React 16.8’deki yeni bir eklentidir. Bir sınıf yazmadan state ve diğer React özelliklerini kullanmanıza olanak sağlarlar.

import React, { useState } from 'react';

function Example() {
  // "count" diyeceğimiz yeni bir state değişkeni tanımlayın  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Bu yeni useState fonksiyonu öğreneceğimiz ilk “Hook”, ancak bu örnek sadece kısa bir tanıtım. Henüz bir anlam ifade etmiyorsa endişelenmeyin!

Bir sonraki sayfada Hook’ları öğrenmeye başlayabilirsiniz. Bu sayfada, React’e Hook’ları neden eklediğimizi ve harika uygulamalar yazmanıza nasıl yardımcı olabileceklerini açıklayarak devam edeceğiz.

Not

React 16.8.0, Hook’ları destekleyen ilk sürümdür. Sürüm yükseltme yaparken, React DOM dahil olmak üzere tüm paketleri güncellemeyi unutmayın. React Native, Hook’ları 0.59 sürümünden itibaren desteklemektedir.

Tanıtım Videosu

React 2018 Konferansı’nda, Sophie Alpert ve Dan Abramov Hook’ları tanıttı, ardından Ryan Florence bunları kullanmak için bir uygulamanın nasıl yeniden yapılandırılacağını gösterdi. Videoyu buradan izleyin:

Mevcut Kodu Bozan Değişiklikler Yok

Devam etmeden önce, unutmayın ki Hook’lar:

• Tamamen opsiyoneldir. Hook’ları mevcut herhangi bir kodu tekrar yazmadan birkaç bileşende deneyebilirsiniz. Fakat istemiyorsanız şu anda Hook’ları öğrenmek veya kullanmak zorunda değilsiniz.
• 100% geriye uyumludur. Hook’lar mevcut kodu bozan herhangi bir değişiklik içermiyor.
• Şu an kullanılabilir. Hook’lar v16.8.0 sürümünün yayımlanması ile şu an kullanıma uygundur.

React’ten sınıfları kaldırmak gibi bir planımız yok. Hook’lar için kademeli kabul stratejisi hakkında daha fazla bilgiyi bu sayfanın alt kısmında bulabilirsiniz.

Hook’lar, React kavramları hakkındaki bilgilerinizin yerini almaz. Bunun yerine, Hook’lar zaten bildiğiniz React kavramlarına (props, state, context, refs ve lifecycle) daha doğrudan bir API sağlar. Daha sonra göstereceğimiz gibi, Hook’lar bunları bir araya getirmek için yeni bir güçlü yol sunar.

Sadece Hook’ları öğrenmeye başlamak istiyorsanız, doğrudan bir sonraki sayfaya atlamaktan çekinmeyin! Ayrıca neden Hook’ları eklediğimizi ve uygulamalarımızı yeniden kodlamadan nasıl kullanmaya başlayacağımızı öğrenmek için bu sayfayı okumaya devam edebilirsiniz.

Motivasyon

Hook’lar, React’te beş yıldan fazla bir süredir yazdığımız ve on binlerce bileşenin bakımını yaptığımız çok çeşitli görünüşte birbirinden bağımsız sorunları çözüyor. React’i öğreniyor, günlük hayatınızda kullanıyor veya hatta benzer bir bileşen modeline sahip farklı bir kütüphaneyi tercih ediyor da olsanız, bu sorunların bazılarını fark edebilirsiniz.

Bileşenler arasındaki stateful logic’i yeniden kullanmak zor

React, bir bileşene yeniden kullanılabilir davranışları “iletmenin” bir yolunu sunmaz (örneğin, bir store’a bağlamak). Bir süre React ile çalıştıysanız, bu sorunu çözmeye çalışan prop’ları render etme ve higher-order bileşenler gibi kalıplara aşina olabilirsiniz. Ancak bu modeller, bileşenlerinizi kullandıkça yeniden yapılandırmanızı gerektirir ki bu da kullanışsızdır ve kodun takip edilmesini zorlaştırır. React DevTools’ta tipik bir React uygulamasına bakarsanız, büyük olasılıkla; sağlayıcılar, tüketiciler, higher-order bileşenler, prop’ları render etme ve diğer soyutlamala katmanları ile çevrili bileşenlerin “wrapper hell” problemini bulacaksınız. Bunları DevTools’ta filtreleyebiliyor olsak da, bu daha derin bir soruna işaret ediyor: React’e, stateful logic’i paylaşmak için daha iyi bir genel çözüm gerekli.

Hook’lar ile, bir bileşenden stateful logic çıkarabilir, böylece bileşen bağımsız olarak test edilebilir ve yeniden kullanılabilir. Hook’lar, bileşen hiyerarşinizi değiştirmeden stateful logic’i yeniden kullanmanıza olanak sağlar. Bu, Hook’ları birçok bileşen arasında veya toplulukla paylaşmayı kolaylaştırır.

Buna daha çok Kendi Hook’larınızı Oluşturma bölümünde değineceğiz.

Karmaşık bileşenlerin anlaşılması zorlaşıyor

Basit bir şekilde başlayan, ancak yönetilemez bir stateful logic ve yan etki karmaşasına dönüşen bileşenlerin bakımını sıkça yapmak zorunda kaldık. Her yaşam döngüsü metodu çoğu zaman alakasız bir mantık karışımı içerir. Örneğin, bileşenler componentDidMount ve componentDidUpdate içerisinde bazı verileri getirebilir. Bununla birlikte, aynı componentDidMount yöntemi de, componentWillUnmount içerisinde gerçekleştirilen temizleme işlemiyle olay dinleyicilerini ayarlayan alakasız bir mantık içerebilir. Birlikte değişen karşılıklı ilişkili kod parçalanır, ancak tamamen ilişkisiz kod tek bir metotta bir araya gelmiş olur. Bu, hataları ve tutarsızlıkları ortaya çıkarmayı çok kolaylaştırır.

Çoğu durumda, bu bileşenleri daha küçük parçalara bölmek mümkün değil çünkü stateful logic darmadağın durumdadır. Test etmek de zordur. Bu, birçok insanın React’i ayrı bir state yönetimi kütüphanesiyle kullanmayı tercih etmelerinin nedenlerinden biridir. Ancak, bu genellikle çok fazla soyutlama getirir, farklı dosyalar arasında atlamanızı gerektirir ve bileşenleri yeniden kullanmayı daha da zorlaştırır.

Bunu çözmek için, yaşam döngüsü metotlarını baz alan bir ayrımı zorlamak yerine Hook’lar, bir bileşeni hangi parçalarla ilgili olduğunu (bir abonelik ayarlamak veya veri almak gibi) baz alarak daha küçük fonksiyonlara ayırmanıza olanak tanır. Ayrıca, daha öngörülebilir hale getirmek için bileşenin state durumunu bir reducer ile yönetmeyi de seçebilirsiniz.

Buna daha çok Efekt Hook’unu Kullanma bölümünde değineceğiz.

Sınıflar hem insanların hem de makinelerin kafasını karıştırıyor

Sınıfların, kodun yeniden kullanılmasını ve kod organizasyonunu zorlaştırmasının yanı sıra, React’i öğrenme konusunda büyük bir engel olabileceğini gördük. Bunun JavaScript’te nasıl çalıştığını anlamalısınız, bu birçok dilde nasıl çalıştığından çok farklı. Olay yöneticilerini bağlamayı için hatırlamanız gereklidir. ES2022 public class fields olmadan, kod çok fazla ayrıntılıdır. İnsanlar prop’ları, state’i ve yukarıdan aşağıya veri akışını mükemmel bir şekilde anlayabilir, ancak yine de sınıfları anlamak için çaba sarfedebilir. React’teki fonksiyon ve sınıf bileşenleri arasındaki ayrım ve her birinin ne zaman kullanılacağı, deneyimli React geliştiricileri arasında bile anlaşmazlıklara yol açar.

Ayrıca, React 5 yıldır mevcut ve önümüzdeki 5 yıl için de kalıcı olacağından emin olmak istiyoruz. Svelte, Angular, Glimmer ve diğerlerinin gösterdiği gibi, bileşenlerin önceden yapılmış derlemeler çok fazla gelecek potansiyeli var. Özellikle de şablonlarla sınırlı değilse. Son zamanlarda, Prepack kullanarak bileşen katlama ile deneme yaptık ve ilk sonuçların umut verici olduğunu gözlemledik. Bununla birlikte, sınıf bileşenlerinin bu optimizasyonları daha yavaş bir yola geri çekmesini sağlayan istemsiz kalıpları teşvik edebileceğini gördük. Sınıflar da bugünün araçları için sorunlar sunmaktadır. Örneğin, sınıflar çok küçültmezler ve hot reloading’i tuhaf ve güvenilmez yaparlar. Kodun optimize edilebilir yolda kalmasını daha kolay kılan bir API sunmak istiyoruz.

Bu sorunları çözmek için, Hook’lar, sınıfsız şekilde React’in özelliklerini daha fazla kullanmanızı sağlar. Kavramsal olarak, React bileşenleri her zaman fonksiyonlara daha yakın olmuştur. Hook’lar React’in pratik ruhundan ödün vermeden. fonksiyonları kucaklar. Hook’lar, mecburi kaçış kapaklarına erişim sağlar ve karmaşık fonksiyonel veya reaktif programlama tekniklerini öğrenmenizi gerektirmez.

Örnekler

Bir Bakışta Hook’lar, Hook’ları öğrenmeye başlamak için iyi bir yer.

Kademeli Kabul Stratejisi

Kısaca: Sınıfları React’ten kaldırmak gibi bir planımız yok.

React geliştiricilerinin ürünlerini teslim etmeye odaklandığını ve yayımlanan her yeni API’yı incelemeye zamanlarının olmadığını biliyoruz. Hook’lar çok yeni ve öğrenmeyi veya benimsemeyi düşünmeden önce daha fazla örnek ve öğretici beklemek daha iyi olabilir.

Ayrıca, React’e yeni bir ilkel (primitive) eklemek için çıtanın son derece yukarıda olduğunun farkındayız. Meraklı okuyucular için, daha detaylıca motivasyonu işleyen ve belirli tasarım kararları ve önceki ilgili teknikler hakkında ekstra perspektif sağlayan detaylı RFC‘i hazırladık.

Önemli olan Hook’lar, mevcut kodla yan yana çalışır, böylece bunları aşamalı olarak kullanabilirsiniz. Hook’lara geçmeniz için acele etmenize gerek yok. Özellikle mevcut, karmaşık sınıf bileşenlerinizi “yeniden yazmak”tan kaçınmanızı öneririz. “Hook’ları anlamak” biraz zaman alabilir. Tecrübelerimize göre, Hook’ları öncelikle yeni ve kritik olmayan bileşenlerde kullanarak pratik yapmak ve ekibinizdeki herkesin kendisini bunu konuda rahat hissetmesini sağlamak en iyisi. Hook’ları denedikten sonra, lütfen bize olumlu ya da olumsuz geri bildirim gönderin.

Hook’ların sınıflar için mevcut tüm kullanım durumlarını kapsamasını istiyoruz, ancak öngörülebilir gelecek için sınıf bileşenlerini desteklemeye devam edeceğiz. Facebook’ta, sınıf olarak yazılmış on binlerce bileşene sahibiz ve bunları yeniden yazmak için kesinlikle hiçbir planımız yok. Bunun yerine, yeni kodda Hook’ları yan yana sınıflarla kullanmaya başlıyoruz.

Sıkça Sorulan Sorular

Hook’lar hakkında en sık sorulan soruları cevaplayan bir Hook’lar için SSS sayfası hazırladık.

Sonraki Adımlar

Bu sayfanın sonunda, Hook’ların hangi problemleri çözdüğü hakkında kabaca bir fikriniz olmalı, ancak birçok detay muhtemelen belirsiz. Merak etmeyin! Şimdi Hook’ları örneklerle öğrenmeye başladığımız bir sonraki sayfaya gidelim.