React Context API: From Zero to Pro 🚀

სტრატეგიული ფიქრი არქიტექტურაზე და ოპტიმიზაცია

1. როდის (არ) გამოვიყენოთ Context?

Context არ არის "Global State Magic". ის არის ინსტრუმენტი ლოკალური "ხის" მასშტაბით ინფორმაციის გადასაცემად.

გამოიყენე Context არ გამოიყენო Context
თემები (Light/Dark Mode) მონაცემები, რომლებიც წამში ბევრჯერ იცვლება
მომხმარებლის ავტორიზაცია ფორმების "Input" სტეიტებისთვის
ლოკალიზაცია (ენა) თუ Prop Drilling მხოლოდ 2 დონეა

2. რეალური მაგალითი: Multi-Step Theme & Auth

განვიხილოთ რთული შემთხვევა: როდესაც Context-ში გვაქვს ობიექტი.

საუკეთესო პრაქტიკა: useMemo-ს გამოყენება 
import { createContext, useState, useMemo, useContext } from 'react';

const AppContext = createContext();

export const AppProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');

  // 🚀 ოპტიმიზაცია: მნიშვნელობა იქმნება მხოლოდ მაშინ, როცა user ან theme იცვლება.
  // ეს თავიდან აგვაცილებს ზედმეტ რერენდერებს.
  const value = useMemo(() => ({
    user,
    theme,
    login: (data) => setUser(data),
    toggleTheme: () => setTheme(t => t === 'light' ? 'dark' : 'light')
  }), [user, theme]);

  return (
    <AppContext.Provider value={value}>
      {children}
    </AppContext.Provider>
  );
};

3. "ბინძური" vs "სუფთა" კომპონენტები

ცუდი მიდგომა 
const Button = () => {
  const ctx = useContext(AppContext);
  // კომპონენტი პირდაპირ 
  // არის მიბმული კონტექსტზე
  return (
    <button onClick={ctx.toggleTheme}>
      {ctx.theme}
    </button>
  );
};
სუფთა მიდგომა 
const Button = ({ onClick, label }) => (
  // კომპონენტი დამოუკიდებელია
  // და მარტივია ტესტირებისთვის
  <button onClick={onClick}>
    {label}
  </button>
);

const ThemeBtn = () => {
  const { theme, toggleTheme } = useTheme();
  return <Button onClick={toggleTheme} label={theme} />;
};

4. რატომ იყენებენ პროფესიონალები CSS Variables-ს?

ლექციისთვის: აუხსენით სტუდენტებს, რომ React-ით ათასობით ელემენტის ინლაინ სტილის შეცვლა ნელია. ბრაუზერის `data-attribute` და CSS ცვლადები მუშაობს Native დონეზე. 
/* Modern & Performant CSS */
[data-theme='dark'] {
  --primary: #bb86fc;
  --surface: #121212;
}

.card {
  background: var(--surface);
  color: var(--primary);
  /* React მხოლოდ ატრიბუტს ცვლის, დანარჩენს ბრაუზერი აკეთებს */
}

5. Performance Pitfalls (ხაფანგები)

თუ კონტექსტის მომხმარებელი კომპონენტი რენდერდება ძალიან ხშირად: