React-də hansı hooklar mövcuddur?

React-də, 16.8-ci versiyadan başlayaraq, hooks funksional komponentlərə vəziyyəti idarə etmək və həyat dövrlərindən istifadə etmək imkanı verir, bunlar əvvəlki zamanlarda yalnız sinif komponentlərində mövcud idi.

Əsas daxili hooks aşağıdakılardır:

• useState: Funksional komponentə daxili vəziyyət əlavə etməyə imkan verir. Cütlük qaytarır: cari vəziyyət və onu yeniləmək üçün funksiya.

  // useState nümunəsi
  import React, { useState } from 'react';
  
  function Counter() {
    const [count, setCount] = useState(0); // Vəziyyətin 0 ilə başlanması
  
    return (
      <div>
        <p>Siz {count} dəfə kliklədiniz</p>
        <button onClick={() => setCount(count + 1)}>
          Mənə kliklə
        </button>
      </div>
    );
  }
  

• useEffect: Funksional komponentlərdə yan təsirləri yerinə yetirməyə imkan verir. Sinif komponentlərinin həyat dövrü metodlarına (componentDidMount, componentDidUpdate, componentWillUnmount) bənzəyir.

  // useEffect nümunəsi
  import React, { useState, useEffect } from 'react';
  
  function Example() {
    const [count, setCount] = useState(0);
  
    // Hər renderdən sonra işləyir
    useEffect(() => {
      document.title = `Siz ${count} dəfə kliklədiniz`;
    });
  
    // Yalnız ilk renderdə işləyir (boş asılılıq arrayı)
    useEffect(() => {
      console.log('Komponent montaj edildi');
      return () => {
        console.log('Komponent söküldü'); // Təmizləmə funksiyası
      };
    }, []);
  
    // count dəyişdikdə işləyir
    useEffect(() => {
      console.log('Count dəyişdi:', count);
    }, [count]);
  
    return (
      <div>
        <p>Siz {count} dəfə kliklədiniz</p>
        <button onClick={() => setCount(count + 1)}>
          Mənə kliklə
        </button>
      </div>
    );
  }
  

• useContext: React kontekstindəki dəyişikliklərə abunə olmağa imkan verir. React.createContext() ilə yaradılmış kontekst obyektini qəbul edir.

  // useContext nümunəsi
  import React, { useContext } from 'react';
  
  const ThemeContext = React.createContext('light'); // Kontekst yaradılması
  
  function ThemedButton() {
    const theme = useContext(ThemeContext); // Kontekstin istifadəsi
  
    return (
      <button className={theme}>
        Mövzudakı düymə {theme}
      </button>
    );
  }
  
  function App() {
    return (
      <ThemedButton />
    );
  }
  

• useReducer: useState-ə alternativ olaraq daha mürəkkəb vəziyyətin idarə olunması üçün, çoxsaylı alt-dəyər və ya növbəti vəziyyətin əvvəlki vəziyyətdən asılı olduğu hallarda istifadə olunur. Redux-dakı reducer-lərə bənzəyir.

  // useReducer nümunəsi
  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 (
      <>
        Count: {state.count}
        <button onClick={() => dispatch({ type: 'increment' })}>+</button>
        <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      </>
    );
  }
  

• useCallback: Geri çağırma funksiyasını yadda saxlayır. Yalnızca asılılıqlardan biri dəyişdikdə dəyişən yadda saxlanmış versiyasını qaytarır. Uşaq komponentlərinin lazımsız yenidən render olunmasının qarşısını almaq üçün faydalıdır.

  // useCallback nümunəsi
  import React, { useState, useCallback } from 'react';
  
  function Parent({ addTodo }) {
    const [count, setCount] = useState(0);
  
    const handleAddTodo = useCallback(() => {
      addTodo();
    }, [addTodo]); // asılılıq addTodo
  
    return (
      <>
        <button onClick={() => setCount(count + 1)}>
          Sayğacı artır
        </button>
        <Child onAddItem={handleAddTodo} />
      </>
    );
  }
  
  function Child({ onAddItem }) {
    console.log('Uşaq komponenti yenidən render olunur'); // yalnız onAddItem dəyişdikdə yenidən render olunacaq
    return <button onClick={onAddItem}>Element əlavə et</button>;
  }
  

• useMemo: Hesablanmış dəyəri yadda saxlayır. Yalnız asılılıqlardan biri dəyişdikdə yenidən hesablanır. Performans üçün faydalıdır, xüsusən ağır hesablamalarda.

  // useMemo nümunəsi
  import React, { useMemo, useState } from 'react';
  
  function expensiveCalculation(num) {
    console.log('Mürəkkəb hesablamanın icrası...');
    for (let i = 0; i < 1000000; i++) {
      num += 1;
    }
    return num;
  }
  
  function Example() {
    const [count, setCount] = useState(0);
    const [todos, setTodos] = useState([]);
  
    const calculation = useMemo(() => expensiveCalculation(count), [count]); // asılılıq count
  
    const addTodo = () => {
      setTodos(t => [...t, "Yeni Todo"]);
    };
  
    return (
      <div>
        <div>
          <h2>Mənim Todo-larım</h2>
          {todos.map((todo, index) => (
            <p key={index}>{todo}</p>
          ))}
          <button onClick={addTodo}>Todo əlavə et</button>
        </div>
        <hr />
        <div>
          Sayğac: {count}
          <button onClick={() => setCount(c => c + 1)}>+</button>
          <h2>Mürəkkəb hesablamalar</h2>
          {calculation}
        </div>
      </div>
    );
  }
  

• useRef: Müxtəlif ref yaradır, hansı ki, komponentin bütün həyat dövrü boyunca saxlanılır. Əsasən DOM elementlərinə giriş və ya dəyişməz, lakin re-render etməyən hər hansı bir dəyəri saxlamaq üçün istifadə olunur.

  // useRef nümunəsi
  import React, { useRef } from 'react';
  
  function TextInputWithFocusButton() {
    const inputEl = useRef(null); // ref yaradılması
  
    const onButtonClick = () => {
      // current, montaj olunmuş DOM elementinə işarə edir
      inputEl.current.focus();
    };
  
    return (
      <>
        <input ref={inputEl} type="text" /> // ref bağlama
        <button onClick={onButtonClick}>İnput sahəsinə fokuslan</button>
      </>
    );
  }
  

• useImperativeHandle: İstifadəçi tərəfindən təyin olunan ref vasitəsilə instansiya təsvirini konfiqurasiya edir. Uşaq komponenti müəyyən metodları valideynə açmağa imkan verir. forwardRef ilə birlikdə istifadə olunur.

  // useImperativeHandle nümunəsi
  import React, { useRef, useImperativeHandle, forwardRef } from 'react';
  
  const MyInput = forwardRef((props, ref) => {
    const inputRef = useRef();
  
    useImperativeHandle(ref, () => ({
      focusInput: () => {
        inputRef.current.focus();
      }
    }));
  
    return <input ref={inputRef} {...props} />;
  });
  
  function ParentComponent() {
    const inputRef = useRef();
  
    const handleFocus = () => {
      inputRef.current.focusInput(); // uşaq komponentindən metod çağırılması
    };
  
    return (
      <div>
        <MyInput ref={inputRef} />
        <button onClick={handleFocus}>Valideyn vasitəsilə fokus</button>
      </div>
    );
  }
  

• useLayoutEffect: useEffect-ə bənzəyir, lakin bütün DOM dəyişikliklərindən sonra sinxron şəkildə icra olunur. DOM-dan məlumat oxumaq və ya browser ekranını yeniləmədən əvvəl ediləcək dəyişikliklər üçün faydalıdır. Render-i blok edə bilər.

  // useLayoutEffect nümunəsi
  import React, { useLayoutEffect, useRef } from 'react';
  
  function Tooltip({ children, text }) {
    const ref = useRef(null);
  
    useLayoutEffect(() => {
      if (ref.current) {
        // DOM əsasında hesablamalar
        const { top, height } = ref.current.getBoundingClientRect();
        console.log(`Element ${top} mövqeyində və hündürlüyü ${height}`);
      }
    }, [children]);
  
    return (
      <span ref={ref} title={text}>
        {children}
      </span>
    );
  }
  

• useDebugValue: React DevTools-da hook üçün istifadəçi tərəfindən təyin olunan etiket göstərir. Xüsusi hook-larda debug üçün istifadə olunur.

  // useDebugValue nümunəsi
  import React, { useState, useDebugValue } from 'react';
  
  function useFriendStatus(friendID) {
    const [isOnline, setIsOnline] = useState(null);
  
    // DevTools-da "Dost Statusu: Offline" və ya "Dost Statusu: Online" göstərir
    useDebugValue(isOnline === true ? 'Online' : 'Offline');
  
    // ... dost statusunu almaq üçün loji
  
    return isOnline;
  }
  
  function FriendListItem({ friend }) {
    const isOnline = useFriendStatus(friend.id);
  
    return (
      <li style={{ color: isOnline ? 'yaşıl' : 'qara' }}>
        {friend.name} - {isOnline ? 'Online' : 'Offline'}
      </li>
    );
  }
  

Bundan başqa, istifadəçi hook-ları (Custom Hooks) də mövcuddur. Bunlar JavaScript funksiyalarıdır və "use" ilə başlayır. Bu, vəziyyət loqikasını komponentlər arasında təkrar istifadə etməyə imkan verir. İstifadəçi hook digər hook-ları çağıra bilər.

// İstifadəçi hook nümunəsi
import { useState, useEffect } from 'react';

function useWindowSize() {
  const [size, setSize] = useState([window.innerWidth, window.innerHeight]);

  useEffect(() => {
    const handleResize = () => {
      setSize([window.innerWidth, window.innerHeight]);
    };
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return size;
}

function MyComponent() {
  const [width, height] = useWindowSize(); // istifadəçi hook

  return (
    <p>Pəncərə ölçüsü: {width}x{height}</p>
  );
}

Əhəmiyyətli olan, hook qaydalarına riayət etməkdir:

1. Hook-ları yalnız React komponentlərinin və ya istifadəçi hooklarının ən yuxarı səviyyəsində çağırın. Döngülər, şərtlər və ya daxili funksiyalar daxilində çağırmayın.
2. Hook-ları yalnız React funksional komponentlərindən və ya istifadəçi hooklarından çağırın. Onları adi JavaScript funksiyalarında və ya sinif komponentlərinin metodlarında çağırmayın.