Кадом hooks-и асосии React-ро медонед ва истифода…

useState: Барои идоракунии ҳолати компонент.
useEffect: Барои иҷрои таъсироти тарафӣ (пурсишҳо ба API, обунаҳо, тағиротҳо дар DOM) дар компонентҳои функсионалӣ ҳамчун вокуниш ба тағирот.
useContext: Барои дастрасӣ ба арзиши контекст аз компонент, бе гузаронидани props тавассути сатҳҳои миёна.
useRef: Барои нигоҳ доштани арзишҳои mutable, ки сабаби rerender намешаванд, ё барои гирифтани истинод ба унсури DOM.
useMemo: Барои мемоизатсияи ҳисобҳо ва пешгирӣ кардани иҷрои дубораи онҳо дар ҳар рендер, агар такягоҳҳо тағир наёбанд.
useCallback: Барои мемоизатсияи функсияҳо, то ки аз эҷод кардани онҳо дар ҳар рендер пешгирӣ шавад ва мушкилоти иҷроиш дар интиқол ба компонентҳое, ки React.memo-ро истифода мебаранд, пешгирӣ шавад.
useReducer: Алтернативаи useState барои идоракунии ҳолати мураккаб, махсусан дар ҳолатҳои навсозии бисёрҷониба ё вақте ки ҳолати оянда аз гузашта вобаста аст.
useLayoutEffect: Ҳамоҳангӣ пас аз ҳама тағирот дар DOM ва пеш аз он ки браузер "расм" кунад. Барои ҳолатҳое истифода мешавад, ки лозим аст ҷойгиршавии унсури DOM пас аз рендер хонда шавад ва эҳтимолан тағирот ворид карда шавад.

Ман фаъолона useState, useEffect, useContext ва useRef-ро дар кори ҳаррӯзаам истифода мебарам. useMemo ва useCallback-ро барои оптимизатсияи иҷроиш дар компонентҳои мураккаб ё дар кор бо рӯйхатҳои калон истифода мебарам. useReducer-ро барои идоракунии ҳолати мураккаб афзал медонам. useLayoutEffect-ро кам истифода мебарам, асосан барои вазифаҳои махсус, ки бо андозагирӣ ва ҷойгиршавии унсурҳо алоқаманданд.

Масалан барои истифодаи useState ва useEffect:

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

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

  useEffect(() => {
    // Навсозии унвонии саҳифа дар тағирёбии ҳисоббарор
    document.title = `Шумо пахш кардед ${count} маротиба`;
  }, [count]); // Такягоҳ: таъсир танҳо дар тағирёбии count

  return (
    <div>
      <p>Шумо пахш кардед {count} маротиба</p>
      <button onClick={() => setCount(count + 1)}>
        Пахш кунед
      </button>
    </div>
  );
}

Масалан барои истифодаи useContext:

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light'); // Эҷоди контекст

function ThemedButton() {
  const theme = useContext(ThemeContext); // Дастрасӣ ба арзиши контекст
  return <button className={theme}>Тугма бо мавзӯъ</button>;
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

// Дар компонент-падар бо провайдер
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

Кадом hooks-и асосии React-ро медонед ва истифода мебаред?