Кайсы негизги React hook-терди билесиз жана колдонуп…

useState: Компонттун абалын башкаруу үчүн.
useEffect: Функционалдык компоненттерде жанама таасирлерди (API суроолор, жазылуулар, DOM менен иштөө) өзгөрүүлөргө жооп катары аткаруу үчүн.
useContext: Контексттин маанисине жетүү үчүн, пропсдорду аралык деңгээлдер аркылуу өткөрбөстөн.
useRef: Муттабилдүү маанилерди сактоо же 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]); // көзкарандылык: эффект only `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>
  );
}

Кайсы негизги React hook-терди билесиз жана колдонуп жатасыз?