React.js Hooks Nedir ve Nasıl Kullanılır?

React.js Hooks, React’in sürüm 16.8 ve sonrasında eklenen bir özelliktir. Hooks, fonksiyonel bileşenlerde (functional components) state ve diğer React özelliklerini kullanmamızı sağlar. Class bileşenlerinde state ve yaşam döngüsü metodlarını kullanmamıza gerek kalmadan, fonksiyonel bileşenlerde aynı işlevleri gerçekleştirmemize imkan tanır.

Hooks, React uygulamalarında mantığı daha kolay anlaşılır ve yönetilebilir hale getirir. En sık kullanılan Hooks’lar şunlardır:

useState: State kullanımını fonksiyonel bileşenlere getirir. Bu hook ile bir değişkenin değerini saklayabilir ve bu değeri güncelleyebilirsiniz.

   import React, { useState } from 'react';

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

     return (
       <div>
         <p>You clicked {count} times</p>
         <button onClick={() => setCount(count + 1)}>
           Click me
         </button>
       </div>
     );
   }

useEffect: Component’in mount, unmount veya güncellenme anlarında çalışacak yan etkilere (side effects) olanak sağlar.

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

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

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

     return (
       <div>
         <p>You clicked {count} times</p>
         <button onClick={() => setCount(count + 1)}>
           Click me
         </button>
       </div>
     );
   }

useContext: Context’i fonksiyonel bileşenlerde kullanmamızı sağlar.

   import React, { useContext } from 'react';
   import MyContext from './MyContext';

   function MyComponent() {
     const value = useContext(MyContext);
     return <div>{value}</div>;
   }

useReducer: Redux gibi state yönetimi için kullanılabilir.

   import React, { useReducer } from 'react';

   const initialState = { count: 0 };

   function reducer(state, action) {
     switch (action.type) {
       case 'increment':
         return { count: state.count + 1 };
       case 'decrement':
         return { count: state.count - 1 };
       default:
         throw new Error();
     }
   }

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

     return (
       <div>
         Count: {state.count}
         <button onClick={() => dispatch({ type: 'increment' })}>+</button>
         <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
       </div>
     );
   }

Hooks, React uygulamalarında daha tutarlı ve sade bir kod yazımı sağlar ve genellikle class component’lerden daha kolaydır.

Şu anda React.js’in resmi olarak desteklediği bazı yaygın React Hooks’ları şunlardır:

• useState: State yönetimi için kullanılır.
• useEffect: Yan etkileri (side effects) yönetmek için kullanılır.
• useContext: Context API’ını kullanarak global verilere erişmek için kullanılır.
• useReducer: State yönetiminde kullanılan Redux benzeri bir alternatif sunar.
• useCallback: Fonksiyonların hafızasında değişiklik olmadığı sürece aynı referansı korumasını sağlar.
• useMemo: Bellekteki hesaplama gereksinimlerini azaltmak için kullanılır.
• useRef: DOM düğümlerine veya başka değerlere erişmek için kullanılır.
• useLayoutEffect: useEffect’e benzer ancak tarayıcı boyutu yeniden hesaplanmadan önce çalışır.
• useImperativeHandle: useRef ile birlikte kullanılarak parent bileşenin alt bileşenin işlevselliğine doğrudan erişmesine olanak tanır.
• useDebugValue: Custom Hooks’lar için geliştirme araçlarında daha okunabilir etiketler sağlar.

Bu, yalnızca en yaygın kullanılan React Hooks’ların bir listesidir. Topluluk tarafından oluşturulan ve paylaşılan daha birçok özel amaçlı Hook vardır.

Share on Facebook

Tweet