React Native Hooks, React.js kütüphanesinin mobil uygulamalar için uyarlanmış versiyonudur. Hooks, komponentlerinizi daha esnek ve verimli hale getirmek için kullanabileceğiniz fonksiyonlar sunar. Öncelikle, Hooks ile state veya diğer React özelliklerini komponentleriniz dışında da kullanabilirsiniz. Ayrıca, Hooks ile komponentler arasında veri paylaşımını veya fonksiyonların tekrar kullanımını kolaylaştırabilirsiniz.

En yaygın kullanılan Hooks arasında useState ve useEffect bulunur. useState, bir komponentin state’ini yönetmek için kullanılır ve useEffect ise komponentin mount edilmesi veya güncellenmesi sırasında çalışmasını sağlar. Örneğin, useEffect ile bir komponentin başlangıçta veri çekmesini veya bir event’e cevap vermesini sağlayabilirsiniz.

React Native Hooks kullanımı, React.js kullanmaya alışkın olanlar için oldukça kolaydır. Ayrıca, Hooks sayesinde kodunuz daha okunaklı ve anlaşılır hale gelecektir. Özellikle, projeleriniz büyüdükçe veya takım içinde geliştirilmeye başladıkça Hooks’un faydasını daha iyi göreceksiniz.

Örnek olarak, useState Hook’u kullanarak bir komponentin içinde state tanımlayabilirsiniz:

import React, { useState } from 'react';

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

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}

Bu örnekte, useState Hook’u kullanarak count adında bir state tanımladık ve setCount fonksiyonunu kullanarak state’i güncelledik. Ayrıca, bir düğmeye tıklama olayı eklendi ve tıklama olayına göre count state’ini arttırdık.

useEffect Hook’u da kullanarak komponentin bir etki yaratmasını sağlayabilirsiniz:

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}

Bu örnekte, useEffect Hook’u kullanarak sayfa başlığının count state’ine göre değişmesini sağladık.

React Native Hook’larının Listesi:

1. useState: Komponent içinde state tanımlamak için kullanılır. Örnekteki gibi, değer ve değeri güncellemek için kullanılan bir fonksiyon döndürür.
2. useEffect: Komponentin bir etki yaratmasını sağlar. Örnekteki gibi, componentDidMount, componentDidUpdate ve componentWillUnmount işlevlerini karşılamak için kullanılır.
3. useContext: Context API’yı kullanmak için kullanılır. Bu Hook ile, bir context değerini ve bu değerin değiştiğinde çalışacak bir fonksiyon alabilirsiniz.
4. useReducer: Reducer fonksiyonlarını kullanmak için kullanılır. Bu Hook ile, state’in nasıl güncelleneceğini tanımlayan bir fonksiyon ve başlangıç değeri alabilirsiniz.
5. useCallback: Komponentin yeniden render edilme sıklığını azaltmak için kullanılır. Bu Hook ile, tekrar kullanılacak bir fonksiyon ve dependancy array oluşturabilirsiniz.
6. useMemo: Komponentin performansını arttırmak için kullanılır. Bu Hook ile, tekrar hesaplanması gereken bir değer ve dependancy array oluşturabilirsiniz.
7. useRef: DOM referanslarını veya komponent içi referansları almak için kullanılır.
8. useImperativeHandle: Komponentin kontrol edilmesini sağlamak için kullanılır.
9. useLayoutEffect: useEffect ile aynı ama layout ve paint işlemleri tamamlandıktan sonra çalışır.
10. useDebugValue: Hook’un ne için kullanıldığını görmek için kullanılır.

Son olarak, React Native Hooks ile geliştirme yaparken aşağıdaki kurallara dikkat etmeniz gerekir:

• Hooks, sadece React fonksiyonel komponentlerinde veya komponent fonksiyonları içinde kullanılabilir.
• Hooks, fonksiyonel komponentlerin en üst seviyesinde veya event handler fonksiyonları içinde çağrılmalıdır.
• Hooks, her render edildiğinde aynı sırada ve aynı değerlerle çağrılmalıdır.

Umarım, React Native Hooks hakkında bu bilgiler faydalı olmuştur ve projelerinizde kullanmaya başlamanızda size yardımcı olmuştur.

Mutlu kodlamalar 🙂

Not: Bu makale ChatGPT’den yararlanılarak hazırlanmıştır.