React ਵਿੱਚ ਐਡਵਾਂਸਡ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ: ਨੌਕਰੀ ਲਈ ਸਹੀ ਟੂਲ ਚੁਣਨਾ

ਰਾਜ ਪ੍ਰਬੰਧਨ ਹਰ ਗੈਰ-ਮਾਮੂਲੀ React ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਦਿਲ 'ਤੇ ਬੈਠਦਾ ਹੈ। ਇਸਨੂੰ ਸਹੀ ਕਰੋ ਅਤੇ ਤੁਹਾਡਾ ਕੋਡਬੇਸ ਸ਼ਾਨਦਾਰ ਢੰਗ ਨਾਲ ਸਕੇਲ ਕਰੋ; ਇਸ ਨੂੰ ਗਲਤ ਸਮਝੋ ਅਤੇ ਤੁਸੀਂ ਪ੍ਰੋਪ-ਡ੍ਰਿਲਿੰਗ ਡਰਾਉਣੇ ਸੁਪਨੇ, ਪੁਰਾਣੇ UI, ਅਤੇ ਭਾਗਾਂ ਦੇ ਨਾਲ ਆਪਣੇ ਆਪ ਨੂੰ ਭੁਲੇਖੇ ਵਿੱਚ ਮੁੜ-ਰੈਂਡਰ ਕਰ ਸਕਦੇ ਹੋ। ਚੰਗੀ ਖ਼ਬਰ ਇਹ ਹੈ ਕਿ React ਈਕੋਸਿਸਟਮ ਨਾਟਕੀ ਢੰਗ ਨਾਲ ਪਰਿਪੱਕ ਹੋ ਗਿਆ ਹੈ. ਤੁਹਾਡੇ ਕੋਲ ਹੁਣ ਮਕਸਦ-ਬਣਾਇਆ ਟੂਲਜ਼ ਦਾ ਇੱਕ ਅਮੀਰ ਮੀਨੂ ਹੈ — Redux Toolkit, Zustand, Jotai, TanStack Query, ਅਤੇ ਬਿਲਟ-ਇਨ Context API — ਹਰੇਕ ਸਮੱਸਿਆ ਦੀ ਇੱਕ ਖਾਸ ਸ਼੍ਰੇਣੀ ਲਈ ਅਨੁਕੂਲਿਤ ਹੈ।

ਇਹ ਲੇਖ ਹਰੇਕ ਹੱਲ ਦੀ ਡੂੰਘਾਈ ਵਿੱਚ ਚੱਲਦਾ ਹੈ, ਠੋਸ ਉਦਾਹਰਣਾਂ ਦੇ ਨਾਲ ਵਪਾਰ-ਆਫ ਦੀ ਵਿਆਖਿਆ ਕਰਦਾ ਹੈ, ਅਤੇ ਤੁਹਾਨੂੰ ਇੱਕ ਫੈਸਲੇ ਦਾ ਫਰੇਮਵਰਕ ਦਿੰਦਾ ਹੈ ਜੋ ਤੁਸੀਂ ਆਪਣੇ ਖੁਦ ਦੇ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ ਤੁਰੰਤ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ।

ਰਾਜ ਦੀਆਂ ਵੱਖੋ-ਵੱਖ ਕਿਸਮਾਂ ਨੂੰ ਸਮਝਣਾ

ਕਿਸੇ ਵੀ ਲਾਇਬ੍ਰੇਰੀ ਤੱਕ ਪਹੁੰਚਣ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਸਹੀ ਹੈ ਕਿ ਤੁਸੀਂ ਅਸਲ ਵਿੱਚ ਕਿਸ ਕਿਸਮ ਦੀ ਸਥਿਤੀ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰ ਰਹੇ ਹੋ। ਵੱਖ-ਵੱਖ ਰਾਜ ਸ਼੍ਰੇਣੀਆਂ ਨੂੰ ਜੋੜਨਾ ਜ਼ਿਆਦਾਤਰ ਓਵਰ-ਇੰਜੀਨੀਅਰਡ React ਐਪਲੀਕੇਸ਼ਨਾਂ ਦਾ ਮੂਲ ਕਾਰਨ ਹੈ।

• ਸਥਾਨਕ UI ਸਥਿਤੀ — ਕੀ ਇੱਕ ਡ੍ਰੌਪਡਾਉਨ ਖੁੱਲਾ ਹੈ, ਕਿਹੜੀ ਟੈਬ ਕਿਰਿਆਸ਼ੀਲ ਹੈ, ਇੱਕ ਨਿਯੰਤਰਿਤ ਇਨਪੁਟ ਦਾ ਮੌਜੂਦਾ ਮੁੱਲ। ਇਹ ਰਾਜ ਇੱਕ ਸਿੰਗਲ ਕੰਪੋਨੈਂਟ ਜਾਂ ਇੱਕ ਛੋਟੇ ਸਬ-ਟਰੀ ਦੀ ਮਲਕੀਅਤ ਹੈ।
• ਸ਼ੇਅਰਡ ਕਲਾਇੰਟ ਸਟੇਟ — ਡਾਟਾ ਜੋ ਕਿ ਮਲਟੀਪਲ, ਸੰਭਾਵੀ ਤੌਰ 'ਤੇ ਦੂਰ ਦੇ ਹਿੱਸਿਆਂ ਨੂੰ ਪੜ੍ਹਨ ਜਾਂ ਲਿਖਣ ਦੀ ਲੋੜ ਹੈ: ਵਰਤਮਾਨ ਵਿੱਚ ਪ੍ਰਮਾਣਿਤ ਉਪਭੋਗਤਾ, ਥੀਮ ਤਰਜੀਹਾਂ, ਇੱਕ ਸ਼ਾਪਿੰਗ ਕਾਰਟ।
• ਸਰਵਰ ਸਥਿਤੀ — ਡਾਟਾ ਜੋ ਸਰਵਰ 'ਤੇ ਉਤਪੰਨ ਹੁੰਦਾ ਹੈ, ਕੁਦਰਤ ਦੁਆਰਾ ਅਸਿੰਕਰੋਨਸ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਕੈਸ਼ ਅਵੈਧਤਾ, ਬੈਕਗ੍ਰਾਉਂਡ ਰੀ-ਫੈਚਿੰਗ, ਅਤੇ ਲੋਡਿੰਗ/ਗਲਤੀ ਜੀਵਨ ਚੱਕਰ ਪ੍ਰਬੰਧਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
• URL ਸਥਿਤੀ — ਫਿਲਟਰ, ਪੰਨਾ ਨੰਬਰ, ਅਤੇ ਖੋਜ ਸ਼ਬਦ ਜੋ ਇੱਕ ਪੰਨੇ ਨੂੰ ਤਾਜ਼ਾ ਕਰਨ ਅਤੇ ਲਿੰਕ ਰਾਹੀਂ ਸਾਂਝਾ ਕਰਨ ਯੋਗ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ।
• ਫਾਰਮ ਰਾਜ - ਨਿਯੰਤਰਿਤ ਇਨਪੁਟਸ, ਪ੍ਰਮਾਣਿਕਤਾ ਤਰੁਟੀਆਂ, ਅਤੇ ਸਬਮਿਸ਼ਨ ਸਥਿਤੀ, ਅਕਸਰ ਇੱਕ ਸਮਰਪਿਤ ਲਾਇਬ੍ਰੇਰੀ ਦੁਆਰਾ ਵਧੀਆ ਢੰਗ ਨਾਲ ਸੰਭਾਲਿਆ ਜਾਂਦਾ ਹੈ ਜਿਵੇਂ ਕਿ React ਹੁੱਕ ਫਾਰਮ।

ਸਭ ਤੋਂ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਚੀਜ਼ ਜੋ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ ਉਹ ਹੈ ਰਾਜ ਦੀ ਹਰ ਸ਼੍ਰੇਣੀ ਨੂੰ ਇੱਕ ਗਲੋਬਲ ਸਟੋਰ ਵਿੱਚ ਪਾਉਣ ਦੀ ਇੱਛਾ ਦਾ ਵਿਰੋਧ ਕਰਨਾ। ਹਰੇਕ ਸ਼੍ਰੇਣੀ ਦੀਆਂ ਵੱਖੋ ਵੱਖਰੀਆਂ ਇਕਸਾਰਤਾ ਲੋੜਾਂ, ਵੱਖੋ-ਵੱਖਰੇ ਜੀਵਨ ਕਾਲ, ਅਤੇ ਵੱਖ-ਵੱਖ ਅੱਪਡੇਟ ਫ੍ਰੀਕੁਐਂਸੀ ਹਨ।

React ਸੰਦਰਭ: ਬਿਲਟ-ਇਨ ਵਿਕਲਪ

ਸੰਦਰਭ API React ਨਾਲ ਭੇਜਦਾ ਹੈ ਅਤੇ ਕਿਸੇ ਵਾਧੂ ਨਿਰਭਰਤਾ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਇਹ ਉਸ ਸਥਿਤੀ ਲਈ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ ਜੋ ਕਦੇ-ਕਦਾਈਂ ਬਦਲਦਾ ਹੈ ਅਤੇ ਬਹੁਤ ਸਾਰੇ ਹਿੱਸਿਆਂ ਦੁਆਰਾ ਖਪਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ — ਕਲਾਸਿਕ ਉਦਾਹਰਣਾਂ ਥੀਮ, ਲੋਕੇਲ, ਅਤੇ ਪ੍ਰਮਾਣਿਤ ਉਪਭੋਗਤਾ ਆਬਜੈਕਟ ਹਨ।

// AuthContext.tsx
import { createContext, useContext, useState, ReactNode } from 'react';

interface AuthState {
  user: User | null;
  login: (credentials: Credentials) => Promise<void>;
  logout: () => void;
}

const AuthContext = createContext<AuthState | null>(null);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  const login = async (credentials: Credentials) => {
    const user = await authService.login(credentials);
    setUser(user);
  };

  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used inside AuthProvider');
  return ctx;
}

ਸੰਦਰਭ ਪ੍ਰਦਰਸ਼ਨ ਜਾਲ

ਸੰਦਰਭ ਵਿੱਚ ਇੱਕ ਜਾਣੀ-ਪਛਾਣੀ ਕਾਰਗੁਜ਼ਾਰੀ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਜੋ ਬਹੁਤ ਸਾਰੇ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਟਰਿੱਪ ਕਰਦੀ ਹੈ: ਜਦੋਂ ਵੀ ਸੰਦਰਭ ਮੁੱਲ ਸੰਦਰਭ ਬਦਲਦਾ ਹੈ ਤਾਂ ਹਰ ਖਪਤਕਾਰ ਮੁੜ-ਰੈਂਡਰ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਇੱਕਲੇ ਸੰਦਰਭ ਵਿੱਚ ਇੱਕ ਵੱਡੀ, ਅਕਸਰ ਪਰਿਵਰਤਿਤ ਵਸਤੂ ਨੂੰ ਸਟੋਰ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਆਪਣੇ ਪੂਰੇ ਰੁੱਖ ਵਿੱਚ ਬੇਲੋੜੇ ਰੀ-ਰੈਂਡਰ ਨੂੰ ਟਰਿੱਗਰ ਕਰੋਗੇ।

ਘਟਾਉਣ ਦੀਆਂ ਰਣਨੀਤੀਆਂ ਹਨ:

• ਅੱਪਡੇਟ ਬਾਰੰਬਾਰਤਾ ਦੁਆਰਾ ਪ੍ਰਸੰਗਾਂ ਨੂੰ ਵੰਡੋ। ਉਪਭੋਗਤਾ ਆਬਜੈਕਟ ਨੂੰ ਇੱਕ ਸੰਦਰਭ ਵਿੱਚ ਅਤੇ UI ਤਰਜੀਹਾਂ ਨੂੰ ਦੂਜੇ ਵਿੱਚ ਰੱਖੋ।
• ਨਾਲ ਮੁੱਲ ਵਸਤੂ ਨੂੰ ਯਾਦ ਕਰੋ useMemo ਇਸ ਲਈ ਸੰਦਰਭ ਸਿਰਫ ਉਦੋਂ ਬਦਲਦਾ ਹੈ ਜਦੋਂ ਡੇਟਾ ਅਸਲ ਵਿੱਚ ਬਦਲਦਾ ਹੈ।
• ਵਰਤੋ React.memo ਮੁੜ-ਰੈਂਡਰ ਨੂੰ ਛੱਡਣ ਲਈ ਖਪਤਕਾਰਾਂ ਦੇ ਭਾਗਾਂ 'ਤੇ ਜਦੋਂ ਉਨ੍ਹਾਂ ਦੀ ਪਰਵਾਹ ਕਰਨ ਵਾਲੇ ਪ੍ਰੋਪਸ ਨਹੀਂ ਬਦਲੇ ਹਨ।

ਇਮਾਨਦਾਰ ਸਿੱਟਾ ਇਹ ਹੈ ਕਿ ਸੰਦਰਭ ਘੱਟ-ਫ੍ਰੀਕੁਐਂਸੀ ਗਲੋਬਲ ਸਟੇਟ ਲਈ ਸ਼ਾਨਦਾਰ ਹੈ, ਪਰ ਇਹ ਇੱਕ ਆਮ-ਉਦੇਸ਼ ਵਾਲਾ ਰਾਜ ਪ੍ਰਬੰਧਨ ਹੱਲ ਨਹੀਂ ਹੈ। ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਆਪ ਨੂੰ ਸੰਦਰਭ ਦੇ ਰੀ-ਰੈਂਡਰ ਵਿਵਹਾਰ ਦੇ ਆਲੇ ਦੁਆਲੇ ਕੰਮ ਕਰਨ ਲਈ ਵਿਸਤ੍ਰਿਤ ਮੈਮੋਇਜ਼ੇਸ਼ਨ ਲਿਖਦੇ ਹੋ, ਤਾਂ ਇਹ ਇੱਕ ਸਮਰਪਿਤ ਲਾਇਬ੍ਰੇਰੀ ਤੱਕ ਪਹੁੰਚਣ ਦਾ ਸਮਾਂ ਹੈ।

Redux ਟੂਲਕਿੱਟ: ਪਰਿਪੱਕ ਐਂਟਰਪ੍ਰਾਈਜ਼ ਵਿਕਲਪ

Redux ਦੀ ਬੌਇਲਰਪਲੇਟ ਲਈ ਇੱਕ ਪ੍ਰਸਿੱਧੀ ਹੈ — ਇੱਕ ਪ੍ਰਤਿਸ਼ਠਾ ਜੋ ਇਸ ਨੇ ਪ੍ਰੀ-ਟੂਲਕਿਟ ਯੁੱਗ ਵਿੱਚ ਕਮਾਈ ਸੀ। Redux Toolkit (RTK) ਰੀਡਕਸ ਨੂੰ ਸ਼ਕਤੀਸ਼ਾਲੀ ਬਣਾਉਂਦੀਆਂ ਚੀਜ਼ਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰਦੇ ਹੋਏ ਸਮਾਰੋਹ ਨੂੰ ਖਤਮ ਕਰ ਦਿੰਦੀ ਹੈ: ਇੱਕ ਸਿੰਗਲ, ਪੂਰਵ-ਅਨੁਮਾਨਯੋਗ, ਨਿਰੀਖਣਯੋਗ ਸਟੇਟ ਟ੍ਰੀ ਸਖਤ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ ਡੇਟਾ ਪ੍ਰਵਾਹ ਦੇ ਨਾਲ।

RTK ਜਹਾਜ਼ createSlice, ਜੋ ਇੱਕ ਸਿੰਗਲ ਪਰਿਭਾਸ਼ਾ ਤੋਂ ਐਕਸ਼ਨ ਕ੍ਰਿਏਟਰ ਅਤੇ ਰੀਡਿਊਸਰ ਤਿਆਰ ਕਰਦਾ ਹੈ, ਅਤੇ ਹੁੱਡ ਦੇ ਹੇਠਾਂ ਇਮਰ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਅਜਿਹੇ ਪਰਿਵਰਤਨ ਲਿਖ ਸਕੋ ਜੋ ਜ਼ਰੂਰੀ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ ਪਰ ਅਸਲ ਵਿੱਚ ਅਟੱਲ ਤੌਰ 'ਤੇ ਲਾਗੂ ਹੁੰਦੇ ਹਨ।

// features/cart/cartSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface CartItem {
  id: string;
  name: string;
  quantity: number;
  price: number;
}

interface CartState {
  items: CartItem[];
  coupon: string | null;
}

const initialState: CartState = { items: [], coupon: null };

export const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    addItem(state, action: PayloadAction<CartItem>) {
      const existing = state.items.find(i => i.id === action.payload.id);
      if (existing) {
        existing.quantity += action.payload.quantity;
      } else {
        state.items.push(action.payload);
      }
    },
    removeItem(state, action: PayloadAction<string>) {
      state.items = state.items.filter(i => i.id !== action.payload);
    },
    applyCoupon(state, action: PayloadAction<string>) {
      state.coupon = action.payload;
    },
  },
});

export const { addItem, removeItem, applyCoupon } = cartSlice.actions;
export default cartSlice.reducer;

RTK ਪੁੱਛਗਿੱਛ: Redux ਦੇ ਅੰਦਰ ਸਰਵਰ ਸਥਿਤੀ

RTK ਇੱਕ ਸਾਥੀ ਭੇਜਦਾ ਹੈ ਜਿਸਨੂੰ RTK ਕਿਊਰੀ ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਜੋ ਸਰਵਰ ਸਥਿਤੀ ਨੂੰ ਸਿੱਧਾ Redux ਸਟੋਰ ਦੇ ਅੰਦਰ ਸੰਭਾਲਦਾ ਹੈ। ਇਹ ਅੰਤਮ ਬਿੰਦੂ ਪਰਿਭਾਸ਼ਾਵਾਂ ਤੋਂ React ਹੁੱਕਾਂ ਨੂੰ ਸਵੈ-ਤਿਆਰ ਕਰਦਾ ਹੈ ਅਤੇ ਕੈਚਿੰਗ, ਅਵੈਧਤਾ, ਅਤੇ ਆਸ਼ਾਵਾਦੀ ਅਪਡੇਟਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਦਾ ਹੈ।

// services/productsApi.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const productsApi = createApi({
  reducerPath: 'productsApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['Product'],
  endpoints: (builder) => ({
    getProducts: builder.query<Product[], void>({
      query: () => '/products',
      providesTags: ['Product'],
    }),
    updateProduct: builder.mutation<Product, Partial<Product>>({
      query: ({ id, ...patch }) => ({
        url: `/products/${id}`,
        method: 'PATCH',
        body: patch,
      }),
      invalidatesTags: ['Product'],
    }),
  }),
});

export const { useGetProductsQuery, useUpdateProductMutation } = productsApi;

Redux ਟੂਲਕਿੱਟ ਸਹੀ ਚੋਣ ਹੈ ਜਦੋਂ ਤੁਹਾਨੂੰ Redux DevTools ਦੁਆਰਾ ਸਮਾਂ-ਯਾਤਰਾ ਡੀਬੱਗਿੰਗ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਜਦੋਂ ਕਈ ਟੀਮਾਂ ਨੂੰ ਲਾਗੂ ਕੀਤੇ ਸੰਮੇਲਨਾਂ ਦੇ ਨਾਲ ਇੱਕ ਸਾਂਝੇ ਰਾਜ ਮਾਡਲ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਉਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਜਾਂ ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ ਗੁੰਝਲਦਾਰ ਕਰਾਸ-ਸਲਾਈਸ ਵਪਾਰਕ ਤਰਕ ਹੁੰਦਾ ਹੈ ਜੋ ਮਿਡਲਵੇਅਰ ਤੋਂ ਲਾਭ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ ਜਿਵੇਂ ਕਿ redux-saga ਜਾਂ redux-observable.

ਜ਼ੁਸਟੈਂਡ: ਸਮਾਰੋਹ ਤੋਂ ਬਿਨਾਂ ਲਾਈਟਵੇਟ ਗਲੋਬਲ ਸਟੇਟ

ਜ਼ੁਸਟੈਂਡ ਇੱਕ ਬਿਲਕੁਲ ਵੱਖਰੀ ਪਹੁੰਚ ਲੈਂਦਾ ਹੈ। ਕੋਈ ਪ੍ਰਦਾਤਾ ਨਹੀਂ ਹੈ, ਕੋਈ ਰੀਡਿਊਸਰ ਨਹੀਂ ਹੈ, ਅਤੇ ਕੋਈ ਕਾਰਵਾਈ ਦੀ ਕਿਸਮ ਨਹੀਂ ਹੈ। ਤੁਸੀਂ ਇੱਕ ਸਟੋਰ ਨੂੰ ਸਟੇਟ ਅਤੇ ਵਿਧੀਆਂ ਦੇ ਨਾਲ ਇੱਕ ਸਧਾਰਨ JavaScript ਵਸਤੂ ਦੇ ਤੌਰ ਤੇ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹੋ, ਫਿਰ ਇਸਨੂੰ ਇੱਕ ਹੁੱਕ ਨਾਲ ਵਰਤਦੇ ਹੋ। ਪੂਰਾ API ਇੱਕ ਸਕ੍ਰੀਨ 'ਤੇ ਫਿੱਟ ਹੁੰਦਾ ਹੈ।

// stores/useCartStore.ts
import { create } from 'zustand';
import { persist, devtools } from 'zustand/middleware';

interface CartStore {
  items: CartItem[];
  addItem: (item: CartItem) => void;
  removeItem: (id: string) => void;
  totalPrice: () => number;
  clear: () => void;
}

export const useCartStore = create<CartStore>()(
  devtools(
    persist(
      (set, get) => ({
        items: [],

        addItem: (item) =>
          set((state) => {
            const existing = state.items.find((i) => i.id === item.id);
            if (existing) {
              return {
                items: state.items.map((i) =>
                  i.id === item.id
                    ? { ...i, quantity: i.quantity + item.quantity }
                    : i
                ),
              };
            }
            return { items: [...state.items, item] };
          }),

        removeItem: (id) =>
          set((state) => ({ items: state.items.filter((i) => i.id !== id) })),

        totalPrice: () =>
          get().items.reduce((sum, i) => sum + i.price * i.quantity, 0),

        clear: () => set({ items: [] }),
      }),
      { name: 'cart-storage' }
    )
  )
);

ਗ੍ਰੈਨਿਊਲਰ ਸਬਸਕ੍ਰਿਪਸ਼ਨ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ

ਜ਼ੁਸਟੈਂਡ ਚੋਣਕਾਰ-ਅਧਾਰਿਤ ਗਾਹਕੀਆਂ ਦੁਆਰਾ ਸੰਦਰਭ ਦੀ ਮੁੜ-ਰੈਂਡਰ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਦਾ ਹੈ। ਇੱਕ ਕੰਪੋਨੈਂਟ ਸਿਰਫ਼ ਉਦੋਂ ਹੀ ਮੁੜ-ਰੈਂਡਰ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਇਸ ਦੁਆਰਾ ਚੁਣੀ ਗਈ ਸਥਿਤੀ ਦਾ ਟੁਕੜਾ ਬਦਲ ਜਾਂਦਾ ਹੈ।

// Only re-renders when items.length changes, not on price changes
const itemCount = useCartStore((state) => state.items.length);

// Only re-renders when the total changes
const total = useCartStore((state) => state.totalPrice());

ਜ਼ੁਸਟੈਂਡ ਦਾ ਮਿਡਲਵੇਅਰ ਈਕੋਸਿਸਟਮ ਲਗਾਤਾਰਤਾ ਨੂੰ ਕਵਰ ਕਰਦਾ ਹੈ localStorage, DevTools ਏਕੀਕਰਣ, ਇਮਰ-ਸ਼ੈਲੀ ਪਰਿਵਰਤਨ, ਅਤੇ URL ਸਮਕਾਲੀਕਰਨ। ਇਹ ਉਹਨਾਂ ਟੀਮਾਂ ਲਈ ਵਿਕਲਪ ਹੈ ਜੋ Redux-ਪੱਧਰ ਦੀ ਸੈਟਅਪ ਲਾਗਤ ਤੋਂ ਬਿਨਾਂ Redux-ਪੱਧਰ ਦੀ ਸਮਰੱਥਾ ਚਾਹੁੰਦੇ ਹਨ।

ਜੋਤਾਈ: ਪਰਮਾਣੂ ਰਾਜ ਰੀਕੋਇਲ ਦੁਆਰਾ ਪ੍ਰੇਰਿਤ

ਜੋਤਾਈ ਮਾਡਲ ਪਰਮਾਣੂਆਂ ਦੇ ਗ੍ਰਾਫ਼ ਦੇ ਤੌਰ 'ਤੇ ਬਿਆਨ ਕਰਦੇ ਹਨ - ਰਾਜ ਦੀਆਂ ਛੋਟੀਆਂ, ਮਿਸ਼ਰਤ ਇਕਾਈਆਂ ਜੋ ਇੱਕ ਦੂਜੇ ਤੋਂ ਪ੍ਰਾਪਤ ਕੀਤੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ। ਇਹ ਮਾਡਲ ਗਤੀਸ਼ੀਲ ਸਥਿਤੀ ਲਈ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਸ਼ਕਤੀਸ਼ਾਲੀ ਹੈ: ਸੰਪਾਦਕ ਨੋਡਾਂ ਦੀ ਇੱਕ ਸੂਚੀ ਸੋਚੋ ਜਿੱਥੇ ਹਰੇਕ ਨੋਡ ਦੀ ਆਪਣੀ ਸੁਤੰਤਰ ਚੋਣ/ਫੋਕਸ ਅਵਸਥਾ ਹੈ, ਜਾਂ ਇੱਕ ਗੁੰਝਲਦਾਰ ਰੂਪ ਜਿੱਥੇ ਫੀਲਡ ਦੀ ਦਿੱਖ ਦੂਜੇ ਫੀਲਡ ਮੁੱਲਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦੀ ਹੈ।

// atoms/filterAtoms.ts
import { atom, selector } from 'jotai';

export const searchTermAtom = atom('');
export const categoryAtom = atom<string | null>(null);
export const productsAtom = atom<Product[]>([]);

// Derived atom — recomputes only when its dependencies change
export const filteredProductsAtom = atom((get) => {
  const products = get(productsAtom);
  const term = get(searchTermAtom).toLowerCase();
  const category = get(categoryAtom);

  return products.filter((p) => {
    const matchesTerm = p.name.toLowerCase().includes(term);
    const matchesCategory = category === null || p.category === category;
    return matchesTerm && matchesCategory;
  });
});

// ProductList.tsx
import { useAtom, useAtomValue } from 'jotai';

function ProductList() {
  const [searchTerm, setSearchTerm] = useAtom(searchTermAtom);
  const filtered = useAtomValue(filteredProductsAtom);

  return (
    <>
      <input value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
      {filtered.map((p) => <ProductCard key={p.id} product={p} />)}
    </>
  );
}

ਜੋਤਾਈ ਦੇ ਵਧੀਆ-ਗ੍ਰੇਨਡ ਰੀਐਕਟੀਵਿਟੀ ਮਾਡਲ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਜਦੋਂ ਖੋਜ ਸ਼ਬਦ ਬਦਲਦਾ ਹੈ, ਸਿਰਫ ਉਹ ਹਿੱਸੇ ਜੋ ਅਸਲ ਵਿੱਚ ਗਾਹਕ ਬਣਦੇ ਹਨ filteredProductsAtom ਮੁੜ-ਰੈਂਡਰ. ਕੰਪੋਨੈਂਟਸ ਦੀ ਹੀ ਗਾਹਕੀ ਲਈ ਗਈ categoryAtom ਅਛੂਤੇ ਹਨ। ਇਹ ਜੋਤਾਈ ਨੂੰ ਸੰਘਣੇ, ਅੰਤਰ-ਨਿਰਭਰ ਸਟੇਟ ਗ੍ਰਾਫਾਂ ਵਾਲੀਆਂ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਸ਼ਾਨਦਾਰ ਬਣਾਉਂਦਾ ਹੈ।

ਟੈਨਸਟੈਕ ਪੁੱਛਗਿੱਛ: ਸਰਵਰ ਸਥਿਤੀ ਲਈ ਸਹੀ ਘਰ

ਟੈਨਸਟੈਕ ਕਿਊਰੀ (ਪਹਿਲਾਂ React ਪੁੱਛਗਿੱਛ) ਇੱਕ ਆਮ ਰਾਜ ਪ੍ਰਬੰਧਨ ਲਾਇਬ੍ਰੇਰੀ ਨਹੀਂ ਹੈ — ਇਹ ਇੱਕ ਸਰਵਰ-ਸਟੇਟ ਲਾਇਬ੍ਰੇਰੀ ਹੈ, ਅਤੇ ਇਹ ਉਸ ਜ਼ਿੰਮੇਵਾਰੀ ਨੂੰ ਈਕੋਸਿਸਟਮ ਵਿੱਚ ਕਿਸੇ ਵੀ ਹੋਰ ਚੀਜ਼ ਨਾਲੋਂ ਬਿਹਤਰ ਢੰਗ ਨਾਲ ਸੰਭਾਲਦੀ ਹੈ। ਟੈਨਸਟੈਕ ਕਿਊਰੀ ਤੋਂ ਬਿਨਾਂ React ਵਿੱਚ ਰਿਮੋਟ ਡੇਟਾ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨਾ, ਕੈਚ ਕਰਨਾ, ਸਮਕਾਲੀ ਕਰਨਾ ਅਤੇ ਅੱਪਡੇਟ ਕਰਨਾ ਆਮ ਤੌਰ 'ਤੇ ਸਥਾਨਕ ਰਾਜ ਜਾਂ ਗਲੋਬਲ ਸਟੋਰ ਵਿੱਚ ਲੋਡਿੰਗ ਫਲੈਗ, ਗਲਤੀ ਵਸਤੂਆਂ, ਅਤੇ ਕੈਸ਼ ਅਪ੍ਰਮਾਣਿਕਤਾ ਨੂੰ ਹੱਥੀਂ ਪ੍ਰਬੰਧਿਤ ਕਰਨਾ ਹੈ। ਟੈਨਸਟੈਕ ਕਿਊਰੀ ਇਸ ਸਭ ਨੂੰ ਸਵੈਚਾਲਤ ਕਰਦੀ ਹੈ।

// hooks/useProducts.ts
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

export function useProducts(filters: ProductFilters) {
  return useQuery({
    queryKey: ['products', filters],
    queryFn: () => api.getProducts(filters),
    staleTime: 5 * 60 * 1000,   // treat data as fresh for 5 minutes
    gcTime: 10 * 60 * 1000,     // keep unused data in cache for 10 minutes
  });
}

export function useUpdateProduct() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (update: ProductUpdate) => api.updateProduct(update),

    // Optimistic update
    onMutate: async (update) => {
      await queryClient.cancelQueries({ queryKey: ['products'] });
      const previous = queryClient.getQueryData(['products']);
      queryClient.setQueryData(['products'], (old: Product[]) =>
        old.map((p) => (p.id === update.id ? { ...p, ...update } : p))
      );
      return { previous };
    },

    onError: (_err, _update, context) => {
      queryClient.setQueryData(['products'], context?.previous);
    },

    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['products'] });
    },
  });
}

ਕਿਊਰੀ ਕੁੰਜੀ ਐਰੇ ਟੈਨਸਟੈਕ ਕਿਊਰੀ ਦੀ ਕੈਚਿੰਗ ਪ੍ਰਾਈਮਿਟਿਵ ਹੈ। ਇੱਕੋ ਕੁੰਜੀ ਨੂੰ ਸਾਂਝਾ ਕਰਨ ਵਾਲੀ ਕੋਈ ਵੀ ਪੁੱਛਗਿੱਛ ਇੱਕੋ ਕੈਸ਼ ਐਂਟਰੀ ਨੂੰ ਸਾਂਝਾ ਕਰਦੀ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਕੁੰਜੀ ਨੂੰ ਅਯੋਗ ਕਰ ਦਿੰਦੇ ਹੋ, ਤਾਂ ਉਸ ਕੁੰਜੀ ਦਾ ਗਾਹਕ ਬਣਨ ਵਾਲਾ ਹਰ ਭਾਗ ਆਪਣੇ ਆਪ ਬੈਕਗ੍ਰਾਊਂਡ ਵਿੱਚ ਮੁੜ-ਫੋਚ ਕਰਦਾ ਹੈ ਅਤੇ ਨਵਾਂ ਡਾਟਾ ਆਉਣ 'ਤੇ ਅੱਪਡੇਟ ਹੋ ਜਾਂਦਾ ਹੈ।

Next.js ਵਿੱਚ ਪ੍ਰੀਫੈਚਿੰਗ ਅਤੇ ਹਾਈਡ੍ਰੇਸ਼ਨ

ਇੱਕ Next.js ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਤੁਸੀਂ ਸਰਵਰ 'ਤੇ ਪ੍ਰਸ਼ਨਾਂ ਨੂੰ ਪ੍ਰੀਫੈਚ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਉਹਨਾਂ ਨੂੰ HTML ਪੇਲੋਡ ਵਿੱਚ ਡੀਹਾਈਡ੍ਰੇਟ ਕਰ ਸਕਦੇ ਹੋ, ਸ਼ੁਰੂਆਤੀ ਪੰਨੇ ਦੇ ਰੈਂਡਰ ਲਈ ਲੋਡਿੰਗ ਸਪਿਨਰਾਂ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਖਤਮ ਕਰਦੇ ਹੋਏ।

// app/products/page.tsx (Next.js App Router)
import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';

export default async function ProductsPage() {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery({
    queryKey: ['products', {}],
    queryFn: () => api.getProducts({}),
  });

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <ProductList />
    </HydrationBoundary>
  );
}

ਲਾਇਬ੍ਰੇਰੀਆਂ ਨੂੰ ਜੋੜਨਾ: ਇੱਕ ਪ੍ਰੈਕਟੀਕਲ ਆਰਕੀਟੈਕਚਰ

ਅਸਲ ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਲਗਭਗ ਹਮੇਸ਼ਾ ਕਈ ਟੂਲਾਂ ਨੂੰ ਜੋੜਨ ਦਾ ਫਾਇਦਾ ਹੁੰਦਾ ਹੈ, ਹਰ ਇੱਕ ਰਾਜ ਦੀ ਆਪਣੀ ਸ਼੍ਰੇਣੀ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਹੈ। ਇੱਕ ਚੰਗੀ-ਸੰਗਠਿਤ ਮੱਧ-ਤੋਂ-ਵੱਡੀ React ਐਪਲੀਕੇਸ਼ਨ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇ ਸਕਦੀ ਹੈ:

• TanStack ਪੁੱਛਗਿੱਛ ਸਾਰੇ ਸਰਵਰ ਰਾਜ ਦਾ ਮਾਲਕ ਹੈ। ਇਹ ਰਿਮੋਟ ਡੇਟਾ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ, ਕੈਚ ਕਰਦਾ ਹੈ ਅਤੇ ਸਮਕਾਲੀ ਕਰਦਾ ਹੈ। ਹੋਰ ਕੁਝ ਵੀ API ਜਵਾਬਾਂ ਨੂੰ ਨਹੀਂ ਛੂੰਹਦਾ।
• ਜ਼ੁਸਟੈਂਡ ਗਲੋਬਲ ਕਲਾਇੰਟ ਸਟੇਟ ਦਾ ਮਾਲਕ ਹੈ — ਸ਼ਾਪਿੰਗ ਕਾਰਟ, ਪ੍ਰਮਾਣਿਤ ਉਪਭੋਗਤਾ ਸੈਸ਼ਨ, UI ਤਰਜੀਹਾਂ, ਅਤੇ ਕੋਈ ਵੀ ਅੰਤਰ-ਵਿਸ਼ੇਸ਼ਤਾ ਤਾਲਮੇਲ ਜੋ ਸੰਦਰਭ ਲਈ ਬਹੁਤ ਗੁੰਝਲਦਾਰ ਹੈ।
• React ਸੰਦਰਭ ਲੋ-ਚਰਨ ਕੌਂਫਿਗਰੇਸ਼ਨ ਦਾ ਮਾਲਕ ਹੈ — ਮੌਜੂਦਾ ਥੀਮ, ਲੋਕੇਲ, ਫੀਚਰ ਫਲੈਗ।
• useState / useReducer ਆਪਣੀ ਲੋਕਲ ਕੰਪੋਨੈਂਟ ਸਟੇਟ — ਮੋਡਲ ਓਪਨ/ਕਲੋਸਡ, ਫਾਰਮ ਫੀਲਡ ਵੈਲਯੂਜ਼ (ਜਾਂ ਗੁੰਝਲਦਾਰ ਫਾਰਮਾਂ ਲਈ React ਹੁੱਕ ਫਾਰਮ), ਟੈਬ ਚੋਣ।
• URL ਖੋਜ ਪੈਰਾਮਸ ਆਪਣੀ ਨੈਵੀਗੇਸ਼ਨਲ ਸਥਿਤੀ — ਕਿਰਿਆਸ਼ੀਲ ਫਿਲਟਰ, ਲੜੀਬੱਧ ਕ੍ਰਮ, ਮੌਜੂਦਾ ਪੰਨਾ ਨੰਬਰ।

ਸਰੋਕਾਰਾਂ ਦਾ ਇਹ ਵਿਛੋੜਾ ਸਿਰਫ਼ ਸੁਹਜ ਨਹੀਂ ਹੈ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਹਾਡਾ ਸਰਵਰ-ਸਟੇਟ ਕੈਸ਼ ਕਦੇ ਵੀ UI ਸਥਿਤੀ ਨਾਲ ਪ੍ਰਦੂਸ਼ਿਤ ਨਹੀਂ ਹੁੰਦਾ, ਤੁਹਾਡਾ ਗਲੋਬਲ ਕਲਾਇੰਟ ਸਟੋਰ ਕਦੇ ਵੀ ਜਵਾਬ ਡੇਟਾ ਦੇ ਨਾਲ ਗੁਬਾਰੇ ਨਹੀਂ ਕਰਦਾ ਜੋ TanStack ਪੁੱਛਗਿੱਛ ਵਧੇਰੇ ਕੁਸ਼ਲਤਾ ਨਾਲ ਕੈਸ਼ ਕਰੇਗਾ, ਅਤੇ ਤੁਹਾਡਾ ਸੰਦਰਭ ਕਦੇ ਵੀ ਐਪ-ਵਿਆਪੀ ਰੀ-ਰੈਂਡਰ ਨੂੰ ਚਾਲੂ ਨਹੀਂ ਕਰਦਾ ਕਿਉਂਕਿ ਕਿਸੇ ਨੇ ਇਸ ਵਿੱਚ ਤੇਜ਼ੀ ਨਾਲ ਬਦਲ ਰਹੇ ਮੁੱਲ ਨੂੰ ਸਟੋਰ ਕੀਤਾ ਹੈ।

ਕਾਰਗੁਜ਼ਾਰੀ ਪੈਟਰਨ ਜਾਣਨ ਯੋਗ

ਰੀ-ਸਿਲੈਕਟ ਦੇ ਨਾਲ ਯਾਦ ਕੀਤੇ ਚੋਣਕਾਰ

Redux ਸਟੋਰ ਤੋਂ ਗਣਨਾ ਕੀਤੇ ਮੁੱਲਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਵੇਲੇ, ਹਰ ਰੈਂਡਰ 'ਤੇ ਮੁੜ-ਕੰਪਿਊਟ ਕਰਨ ਤੋਂ ਬਚਣ ਲਈ ਮੁੜ-ਚੁਣੋ ਦੀ ਵਰਤੋਂ ਕਰੋ। RTK ਮੁੜ-ਨਿਰਯਾਤ ਕਰਦਾ ਹੈ createSelector ਮੁੜ-ਚੁਣੋ ਤੋਂ।

import { createSelector } from '@reduxjs/toolkit';

const selectItems = (state: RootState) => state.cart.items;

export const selectCartSummary = createSelector(selectItems, (items) => ({
  count: items.reduce((n, i) => n + i.quantity, 0),
  total: items.reduce((sum, i) => sum + i.price * i.quantity, 0),
}));

ਵਰਤੋਂ ਪਰਿਵਰਤਨ ਨਾਲ ਰੈਂਡਰ ਵੰਡਣਾ

React 18 ਦਾ useTransition ਤੁਹਾਨੂੰ ਇੱਕ ਸਟੇਟ ਅੱਪਡੇਟ ਨੂੰ ਗੈਰ-ਜ਼ਰੂਰੀ ਵਜੋਂ ਚਿੰਨ੍ਹਿਤ ਕਰਨ ਦਿੰਦਾ ਹੈ ਤਾਂ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਇਸਨੂੰ ਯੂਜ਼ਰ ਇਨਪੁਟ ਵਰਗੇ ਉੱਚ-ਪ੍ਰਾਥਮਿਕਤਾ ਵਾਲੇ ਕੰਮ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਰੋਕ ਸਕੇ। ਇਹ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਲਾਭਦਾਇਕ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਇੱਕ ਰਾਜ ਤਬਦੀਲੀ ਇੱਕ ਮਹਿੰਗੇ ਰੀ-ਰੈਂਡਰ ਨੂੰ ਚਾਲੂ ਕਰਦੀ ਹੈ।

const [isPending, startTransition] = useTransition();

const handleFilterChange = (value: string) => {
  startTransition(() => {
    setFilterValue(value); // expensive downstream re-render is deferrable
  });
};

ਵਸਤੂ ਪਛਾਣ ਮੁੱਦਿਆਂ ਤੋਂ ਬਚਣਾ

ਫੈਂਟਮ ਰੀ-ਰੈਂਡਰ ਦਾ ਇੱਕ ਆਮ ਸਰੋਤ ਰੈਂਡਰ ਦੇ ਅੰਦਰ ਨਵੀਂ ਵਸਤੂ ਜਾਂ ਐਰੇ ਲਿਟਰਲ ਬਣਾ ਰਿਹਾ ਹੈ। useMemo ਅਤੇ useCallback ਤੁਹਾਡੇ ਟੂਲ ਇੱਥੇ ਹਨ, ਪਰ ਉਹਨਾਂ ਨੂੰ ਉਦੋਂ ਹੀ ਲਾਗੂ ਕਰੋ ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ ਪ੍ਰਦਰਸ਼ਨ ਦੀ ਸਮੱਸਿਆ ਦਾ ਸਬੂਤ ਹੋਵੇ — ਸਮੇਂ ਤੋਂ ਪਹਿਲਾਂ ਯਾਦ-ਪੱਤਰ ਗਾਰੰਟੀਸ਼ੁਦਾ ਲਾਭ ਦੇ ਬਿਨਾਂ ਬੋਧਾਤਮਕ ਓਵਰਹੈੱਡ ਨੂੰ ਜੋੜਦਾ ਹੈ।

ਫੈਸਲਾ ਫਰੇਮਵਰਕ

ਇੱਕ ਨਵੀਂ ਵਿਸ਼ੇਸ਼ਤਾ ਲਈ ਰਾਜ ਪ੍ਰਬੰਧਨ ਪਹੁੰਚ ਦੀ ਚੋਣ ਕਰਦੇ ਸਮੇਂ ਹੇਠਾਂ ਦਿੱਤੇ ਫੈਸਲੇ ਦੇ ਰੁੱਖ ਦੀ ਵਰਤੋਂ ਕਰੋ:

1. ਕੀ ਰਾਜ ਸਿਰਫ਼ ਇੱਕ ਹਿੱਸੇ ਜਾਂ ਇੱਕ ਛੋਟੇ ਸਬ-ਟਰੀ ਲਈ ਸਥਾਨਕ ਹੈ? ਵਰਤੋ useState ਜਾਂ useReducer.
2. ਕੀ ਰਾਜ ਸਰਵਰ ਤੋਂ ਪ੍ਰਾਪਤ ਕੀਤੇ ਡੇਟਾ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ? ਵਰਤੋ TanStack ਪੁੱਛਗਿੱਛ.
3. ਕੀ ਇਹ ਗਲੋਬਲ ਕਲਾਇੰਟ ਸਟੇਟ ਹੈ ਜਿਸਦੀ ਰੁੱਖ ਦੇ ਕਈ ਹਿੱਸਿਆਂ ਦੀ ਲੋੜ ਹੈ? ਤੱਕ ਪਹੁੰਚੋ ਜ਼ੁਸਟੈਂਡ ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਇੱਕ Redux ਕੋਡਬੇਸ ਵਿੱਚ ਨਹੀਂ ਹੋ।
4. ਕੀ ਰਾਜ ਬਹੁਤ ਘੱਟ ਬਦਲਦਾ ਹੈ ਅਤੇ ਇੱਕ ਸੰਰਚਨਾ ਉਦੇਸ਼ (ਥੀਮ, ਲੋਕੇਲ) ਨੂੰ ਪੂਰਾ ਕਰਦਾ ਹੈ? ਵਰਤੋ React ਸੰਦਰਭ.
5. ਕੀ ਰਾਜ ਬਹੁਤ ਸਾਰੇ ਪ੍ਰਾਪਤ ਮੁੱਲਾਂ ਨਾਲ ਬਹੁਤ ਜ਼ਿਆਦਾ ਜੁੜਿਆ ਹੋਇਆ ਹੈ? ਵਿਚਾਰ ਕਰੋ ਜੋਤੈ.
6. ਕੀ ਤੁਹਾਨੂੰ ਸਮਾਂ-ਯਾਤਰਾ ਡੀਬੱਗਿੰਗ, ਸਖਤ ਆਰਕੀਟੈਕਚਰਲ ਸੰਮੇਲਨਾਂ, ਜਾਂ ਗੁੰਝਲਦਾਰ ਅਸਿੰਕ ਸਾਗਾਸ ਦੀ ਲੋੜ ਹੈ? ਵਰਤੋ Redux ਟੂਲਕਿੱਟ.

ਬਚਣ ਲਈ ਆਮ ਵਿਰੋਧੀ ਪੈਟਰਨ

• ਸਰਵਰ ਜਵਾਬਾਂ ਨੂੰ Redux ਜਾਂ Zustand ਵਿੱਚ ਸਟੋਰ ਕਰਨਾ। TanStack ਪੁੱਛਗਿੱਛ ਨੂੰ ਉਸ ਡੇਟਾ ਦੇ ਮਾਲਕ ਹੋਣ ਦਿਓ। ਇੱਕ ਗਲੋਬਲ ਸਟੋਰ ਵਿੱਚ ਇਸਨੂੰ ਡੁਪਲੀਕੇਟ ਕਰਨਾ ਸਮਕਾਲੀਕਰਨ ਬੱਗ ਬਣਾਉਂਦਾ ਹੈ।
• ਇੱਕ ਵਿਸ਼ਾਲ ਸਟੋਰ ਵਿੱਚ ਹਰ ਚੀਜ਼ ਨੂੰ ਇਕੱਠਾ ਕਰਨਾ. ਇੱਕੋ ਟੁਕੜੇ ਵਿੱਚ ਸੰਬੰਧਿਤ ਗੈਰ-ਸਬੰਧਤ ਅਵਸਥਾ ਬੇਲੋੜੀ ਜੋੜਨ ਲਈ ਮਜਬੂਰ ਕਰਦੀ ਹੈ ਅਤੇ ਟੈਸਟਿੰਗ ਨੂੰ ਔਖਾ ਬਣਾਉਂਦੀ ਹੈ।
• ਉੱਚ-ਵਾਰਵਾਰਤਾ ਅੱਪਡੇਟ ਲਈ ਸੰਦਰਭ ਦੀ ਵਰਤੋਂ ਕਰਨਾ। ਹਰ ਸੰਦਰਭ ਮੁੱਲ ਤਬਦੀਲੀ ਸਾਰੇ ਖਪਤਕਾਰਾਂ ਨੂੰ ਮੁੜ-ਰੈਂਡਰ ਕਰਦੀ ਹੈ। ਮੁੱਲਾਂ ਲਈ ਜੋ ਹਰ ਕੀਸਟ੍ਰੋਕ ਜਾਂ ਐਨੀਮੇਸ਼ਨ ਫਰੇਮ 'ਤੇ ਬਦਲਦੇ ਹਨ, ਸੰਦਰਭ ਗਲਤ ਟੂਲ ਹੈ।
• ਕੰਪੋਨੈਂਟਸ ਦੇ ਅੰਦਰ ਦੀ ਸਥਿਤੀ ਪ੍ਰਾਪਤ ਕਰਨਾ। ਗਣਨਾ ਕੀਤੇ ਮੁੱਲ ਜੋ ਕਿ ਸਥਿਤੀ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ, ਯਾਦ ਕੀਤੇ ਚੋਣਕਾਰ ਜਾਂ ਪ੍ਰਾਪਤ ਕੀਤੇ ਪਰਮਾਣੂ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ, ਨਾ ਕਿ ਹਰ ਰੈਂਡਰ 'ਤੇ ਚੱਲਣ ਵਾਲੀਆਂ ਇਨਲਾਈਨ ਗਣਨਾਵਾਂ।
• ਲੋਡਿੰਗ ਅਤੇ ਗਲਤੀ ਸਥਿਤੀਆਂ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ। ਸਰਵਰ ਸਥਿਤੀ ਮੂਲ ਰੂਪ ਵਿੱਚ ਅਸਿੰਕ੍ਰੋਨਸ ਹੈ। TanStack ਪੁੱਛਗਿੱਛ ਸਤਹ isLoading, isError, ਅਤੇ error ਹਰ ਪੁੱਛਗਿੱਛ ਲਈ; ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ.

ਸਿੱਟਾ

React ਵਿੱਚ ਰਾਜ ਪ੍ਰਬੰਧਨ ਲੈਂਡਸਕੇਪ ਕਦੇ ਵੀ ਸਿਹਤਮੰਦ ਨਹੀਂ ਰਿਹਾ। ਤੁਹਾਨੂੰ ਹੁਣ ਇੱਕ ਭਾਰੀ ਫਰੇਮਵਰਕ ਅਤੇ ਸਕ੍ਰੈਚ ਤੋਂ ਸਭ ਕੁਝ ਬਣਾਉਣ ਦੇ ਵਿਚਕਾਰ ਚੋਣ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। Redux Toolkit ਆਪਣੇ ਪੂਰਵਜ ਦੇ ਬਾਇਲਰਪਲੇਟ ਤੋਂ ਬਿਨਾਂ ਐਂਟਰਪ੍ਰਾਈਜ਼-ਗ੍ਰੇਡ ਦੀ ਭਵਿੱਖਬਾਣੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਜ਼ੁਸਟੈਂਡ ਸੈੱਟਅੱਪ ਦੇ ਇੱਕ ਹਿੱਸੇ ਨਾਲ ਉਹੀ ਸ਼ਕਤੀ ਲਿਆਉਂਦਾ ਹੈ। ਜੋਤਾਈ ਬਾਰੀਕ, ਗਤੀਸ਼ੀਲ ਸਥਿਤੀ ਗ੍ਰਾਫਾਂ ਵਿੱਚ ਸਖ਼ਤ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਕਰਦਾ ਹੈ। ਅਤੇ ਟੈਨਸਟੈਕ ਕਿਊਰੀ ਨੇ ਸਰਵਰ ਸਥਿਤੀ ਨੂੰ ਨਿਸ਼ਚਤ ਤੌਰ 'ਤੇ ਹੱਲ ਕੀਤਾ ਹੈ - ਜੇਕਰ ਤੁਸੀਂ ਅਜੇ ਵੀ API ਜਵਾਬਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰ ਰਹੇ ਹੋ useEffect ਅਤੇ useState, ਪਰਵਾਸ ਕਰਨ ਲਈ ਤੁਸੀਂ ਆਪਣੇ ਆਪ ਨੂੰ ਦੇਣਦਾਰ ਹੋ।

ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਸਮਝ ਸਪੱਸ਼ਟ ਹੈ: ਪਹਿਲਾਂ ਪਛਾਣ ਕਰੋ ਕਿ ਤੁਸੀਂ ਕਿਸ ਕਿਸਮ ਦੇ ਰਾਜ ਨਾਲ ਕੰਮ ਕਰ ਰਹੇ ਹੋ, ਫਿਰ ਉਸ ਸ਼੍ਰੇਣੀ ਲਈ ਅਨੁਕੂਲਿਤ ਟੂਲ ਦੀ ਚੋਣ ਕਰੋ। ਹਰ ਚੀਜ਼ ਨੂੰ ਇੱਕ ਸਿਸਟਮ ਵਿੱਚ ਫਨਲ ਕਰਨ ਦੀ ਪ੍ਰਵਿਰਤੀ ਦਾ ਵਿਰੋਧ ਕਰੋ। ਇੱਕ ਪੱਧਰੀ ਪਹੁੰਚ — ਸਰਵਰ ਸਟੇਟ ਲਈ ਟੈਨਸਟੈਕ ਕਿਊਰੀ, ਗਲੋਬਲ ਕਲਾਇੰਟ ਸਟੇਟ ਲਈ ਜ਼ੁਸਟੈਂਡ, ਸੰਰਚਨਾ ਲਈ ਸੰਦਰਭ, ਅਤੇ ਹਰ ਚੀਜ਼ ਲਈ ਸਥਾਨਕ ਰਾਜ — ਕੋਡਬੇਸ ਪੈਦਾ ਕਰਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਬਾਰੇ ਤਰਕ ਕਰਨਾ ਆਸਾਨ ਹੁੰਦਾ ਹੈ, ਟੈਸਟ ਕਰਨਾ ਆਸਾਨ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਟੀਮਾਂ ਅਤੇ ਲੋੜਾਂ ਵਧਣ ਦੇ ਨਾਲ-ਨਾਲ ਬਹੁਤ ਜ਼ਿਆਦਾ ਸਾਂਭਣਯੋਗ ਹੁੰਦੇ ਹਨ।