React State Management: Boshlang'ichlar Uchun To'liq Qo'llanma

React-da State Nima va Nega U Muhim?

React ilovalarini yaratishni boshlagan har bir dasturchi duch keladigan eng muhim tushunchalardan biri bu — state (holat). Oddiy qilib aytganda, state bu komponentning ma'lum bir vaqtdagi xotirasi hisoblanadi. Foydalanuvchi tugmani bosganda, formani to'ldirganda yoki serverdan ma'lumot yuklanganda interfeys o'zgaradi. Bularning barchasi aynan state boshqaruvi (state management) orqali amalga oshiriladi.

Agar siz dasturlashni yangi boshlayotgan bo'lsangiz, Redux, Zustand yoki MobX kabi kutubxonalar haqida eshitib, chalkashib ketishingiz tabiiy. Ushbu qo'llanmada biz eng sodda holatdan boshlab, qachon qaysi yechimni tanlash kerakligini bosqichma-bosqich ko'rib chiqamiz.

1. Lokal State: useState Hook

Har qanday React dasturchisi birinchi bo'lib o'rganishi kerak bo'lgan vosita bu useState hookidir. U bitta komponent ichida yopiq bo'lgan ma'lumotlarni saqlash uchun mo'ljallangan. Masalan, modal oynaning ochiq yoki yopiqligi, kiritish maydonidagi matn yoki oddiy hisoblagich.

import { useState } from 'react';

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

  return (
    

      
Sanoq: {count}
      
    
  );
}

Ushbu holatda count qiymati faqat Counter komponentiga tegishli. Boshqa komponentlar bundan bexabar bo'ladi va shunday bo'lishi to'g'ri hamdir.

2. Murakkab Lokal Mantiq: useReducer

Agar sizda bir-biriga bog'liq bir nechta holatlar bo'lsa yoki bitta amal natijasida bir vaqtning o'zida bir nechta qiymat o'zgarishi kerak bo'lsa, useState kodni chalkashtirib yuborishi mumkin. Bunday paytda useReducer yordamga keladi.

U Redux arxitekturasiga juda o'xshash bo'lib, o'zgarishlarni bitta funksiya (reducer) orqali markazlashtirilgan holda boshqarishga imkon beradi:

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function CounterWithReducer() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    

      
Natija: {state.count}
      
      
    
  );
}

3. Global State: Context API

Loyiha kattalashgani sari turli xil ierarxiyadagi komponentlar bir xil ma'lumotga ehtiyoj seza boshlaydi. Masalan, tizimga kirgan foydalanuvchi ma'lumotlari (user auth), sayt mavzusi (dark/light mode) yoki til tanlovi. Agar bu ma'lumotlarni prop sifatida o'nta qavat pastga uzatib chiqsangiz, bu prop drilling muammosini keltirib chiqaradi.

React-ning ichki Context API imkoniyati ma'lumotni daraxt bo'ylab to'g'ridan-to'g'ri istalgan quyi komponentga yetkazib berishga yordam beradi:

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

4. Tashqi Kutubxonalar: Qachon Zustand yoki Redux Toolkit Ishlatish Kerak?

Context API kichik va o'rta loyihalar uchun ajoyib, lekin tez-tez o'zgarib turadigan katta ma'lumotlar oqimida (masalan, real vaqtda yangilanadigan chatlar, e-tijorat savatchasi) ortiqcha qayta chizilishlarga (re-render) sabab bo'lishi mumkin.

Shunday holatlarda zamonaviy tashqi kutubxonalarga murojaat qilish tavsiya etiladi:

• Zustand: Hozirgi kunda eng ommabop, juda yengil va tushunish oson bo'lgan holat boshqaruvchisi. Boilerplate kodi kam va tezkor ishlaydi.
• Redux Toolkit (RTK): Katta hajmdagi enterprise tizimlar, ko'p kishilik dasturchilar jamoasi va qat'iy standartlar talab qilinadigan loyihalar uchun standart vosita.
• TanStack Query (React Query): Bu server holati (server state) uchun mo'ljallangan vosita. API so'rovlari, keshlar va yuklanish holatlarini boshqarishda uni an'anaviy global state kutubxonalari bilan almashtirish tavsiya etiladi.

Yangi Boshlovchilar Uchun Oltin Qoidalar

1. Holatni keragidan ortiq globallashtirmang: Agar ma'lumot faqat bitta formaga kerak bo'lsa, uni useState ichida qoldiring.
2. Server holatini alohida ajrating: Backend-dan keladigan ma'lumotlar uchun alohida Redux store ochish shart emas, buning uchun TanStack Query ishlatish ancha qulay.
3. Oddiylikdan boshlang: Loyihangiz kichik bo'lsa, to'g'ridan-to'g'ri murakkab kutubxonalarni qo'shmang. Ehtiyoj paydo bo'lgandagina Context API yoki Zustand-ga o'ting.