🌿 React Native State Management Context API ব্যবহার (TypeScript সহ)

বড় React Native অ্যাপে state একাধিক screen ও component-এ ব্যবহার করতে হয়। prop drilling এ সমস্যা এড়াতে আমরা ব্যবহার করি Context API।

1️⃣ Context API কী?

Context API হলো React-এর built-in state management system, যার মাধ্যমে আমরা global state তৈরি করে যেকোনো component থেকে access করতে পারি— props পাঠানো ছাড়াই।

2️⃣ কখন Context API ব্যবহার করবেন?

• User Login Info
• Theme (Dark / Light)
• Language
• Cart / Wishlist
• App Settings

3️⃣ File-based Folder Structure (Recommended)

src/
 ├── context/
 │    └── CounterContext.tsx
 ├── screens/
 │    ├── HomeScreen.tsx
 │    └── ProfileScreen.tsx
 ├── App.tsx
  

4️⃣ Context তৈরি করা (TypeScript সহ)

প্রথমে আমরা একটি Counter Context বানাবো।

import React, { createContext, useState, ReactNode } from 'react';

interface CounterContextType {
  count: number;
  increment: () => void;
  decrement: () => void;
}

export const CounterContext = createContext(undefined);

export const CounterProvider = ({ children }: { children: ReactNode }) => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    
      {children}
    
  );
};
  

5️⃣ App.tsx এ Provider wrap করা

import React from 'react';
import { CounterProvider } from './context/CounterContext';
import HomeScreen from './screens/HomeScreen';

export default function App() {
  return (
    
      
    
  );
}
  

6️⃣ Context ব্যবহার করা (useContext)

import React, { useContext } from 'react';
import { View, Text, Button } from 'react-native';
import { CounterContext } from '../context/CounterContext';

export default function HomeScreen() {
  const counter = useContext(CounterContext);

  if (!counter) return null;

  return (
    
      Count: {counter.count}
      
      
    
  );
}
  

7️⃣ Output কেমন হবে?

8️⃣ Context API এর সুবিধা ও সীমাবদ্ধতা