რა ძირითადი 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]); // დამოკიდებულება: ეფექტი მუშაობს მხოლოდ `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>
  );
}