Sobes.tech
Middle

Fonksiyonel bileşenlerde hangi hook'larla çalıştınız? En ilginç olan hangisiydi?

sobes.tech yapay zeka

AI'dan gelen yanıt

React'in fonksiyonel bileşenlerinde sıklıkla aşağıdaki hooklar kullanılır:

  • useState — durum yönetimi için.
  • useEffect — yan etkiler (sorgular, abonelikler) için.
  • useContext — bağlam erişimi için.
  • useRef — değiştirilebilir değerleri saklamak ve DOM'a erişmek için.
  • useMemo ve useCallback — performans optimizasyonu için.

En alışılmadık hook, üzerinde çalıştığım useImperativeHandle olabilir. Bu, ref aracılığıyla ebeveyn bileşene erişilebilir olan örneği yapılandırmanıza olanak tanır. Bu, özellikle DOM elementleri veya üçüncü taraf kütüphaneler üzerinde çalışan sarmalayıcılar ile çalışırken, dışarıdan erişilebilir olan yöntemleri veya özellikleri kontrol etmek istediğinizde faydalıdır.

useImperativeHandle kullanım örneği:

import React, { useImperativeHandle, forwardRef, useRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} {...props} />;
});

// Ebeveyn bileşen, focus metodunu çağırabilir:
// const ref = React.createRef();
// <FancyInput ref={ref} />
// ref.current.focus();