React Tutorial 2023 28 – Hooks Kavramı

Merhabalar bu yazımda temel olarak React’te Hooks kavramını ele alacağım. Burada paylaşacağım kod parçalarına şimdilik takılmayınız sadece birer örnek olsun diye paylaşmış olacağım. React’in Hooklarının tamamını sırayla işleyeceğiz.

React Hooks, React 16.8 sürümüyle birlikte tanıtılan ve fonksiyon bileşenlerinin durum (state) ve yaşam döngüsü gibi özelliklere erişimini sağlayan özelliklerdir.

Hooks, React’teki sınıf bileşenlerini genellikle gereksiz hale getirir çünkü Hooks sayesinde fonksiyon bileşenleri de durum yönetimini ve yaşam döngüsü metotlarını kullanabilir hale gelir. Bunun yanı sıra, Hooks ile birlikte React bileşenlerinin karmaşıklığı azalır ve daha okunabilir hale gelir.

Hooks, sınıf bileşenlerindekine benzer bir şekilde durum değişikliklerine ve yan etkilere (side-effects) tepki verir. Ancak Hooks, sınıf bileşenlerinin aksine daha basit bir sözdizimi kullanır ve bu sayede kod daha anlaşılır hale gelir.

Hooks, kod tekrarını önlemek ve durumları bileşenler arasında paylaşmak için kullanılabilir. 

Bu kurallar, Hooks’un düzgün çalışabilmesi için önemlidir.

React’in Ana Hook’ları

1. useState: Bu Hook, fonksiyonel bileşenlerde state oluşturmayı ve yönetmeyi sağlar. Bu, bileşenin durumunu izlemenizi ve güncellemenizi sağlar.

const [count, setCount] = useState(0);

2. useEffect: Bu Hook, fonksiyonel bileşenlerde yan etkileri (side effects) gerçekleştirmenizi sağlar. Yan etkiler genellikle API çağrıları, zamanlayıcılar ve manuel DOM manipülasyonları gibi işlemleri içerir.

useEffect(() => { document.title = `You clicked ${count} times`; });

3. useContext: Bu Hook, React Context API’ye erişimi kolaylaştırır. Bu, bileşen ağacı boyunca global olarak erişilebilen verileri paylaşmanızı sağlar.

const theme = useContext(ThemeContext);

4. useReducer: Bu Hook, daha karmaşık state mantığını yönetmenizi sağlar. useState Hook’unun yerine geçebilir ve genellikle birden çok alt değeri olan state’i yönetmek için kullanılır.

const [state, dispatch] = useReducer(reducer, initialState);

5. useCallback: Bu Hook, gereksiz yeniden render’ları önlemek için kullanılır. Verilen fonksiyonu ve bağımlılık listesini alır ve bağımlılıklar değişene kadar aynı fonksiyonu döndürür.

const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);

6. useMemo: Bu Hook, işlem maliyeti yüksek fonksiyonların sonuçlarını “hatırlar” ve gereksiz hesaplamaları önler.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

7. useRef: Bu Hook, değişkenlere “referans” oluşturmayı sağlar. Bu, React bileşenleri arasında değerleri “hatırlamak” için kullanılabilir.

const myRef = useRef(initialValue);

8. useImperativeHandle: Bu Hook, ebeveyn bileşenlerin çocuk bileşenlerin örneklerine erişmesini sağlar.

useImperativeHandle(ref, createHandle, [deps])

9. useLayoutEffect: Bu Hook, DOM güncellemelerinden hemen sonra bir etkiyi gerçekleştirmenizi sağlar. useEffect ile aynı imzaya sahiptir ancak zamanlaması farklıdır.

useLayoutEffect(() => { // effect and cleanup code });

10. useDebugValue: Bu Hook, özel Hook’ların içindeki değerleri görüntülemek için kullanılır. Bu, React DevTools gibi araçlarda daha iyi bir debug deneyimi sağlar.

useDebugValue(value); ```

Her bir Hook, belirli bir işlevi yerine getirir ve React uygulamanızın çeşitli yönlerini yönetmeye yardımcı olur. Bazen, belirli bir durumu ele almak için birden fazla Hook’un birleştirilmesi gerekebilir.

useState ve useEffect gibi dahili Hooks dışında, kendi özel Hooklarımızı da oluşturabiliriz.

Genel hatlarıyla Hooks kavramına baktık. Şimdi bir sonraki yazımda useState Hook’u ile devam edeceğiz.

Bir sonraki yazımda görüşmek üzere.