📌 React Hooks কী?

React Hooks একটি বিশেষ ফিচার যা Functional Component-এর ভেতরে state, lifecycle method, side-effect, event handling নিয়ন্ত্রণ করতে সাহায্য করে। Hooks ব্যবহারের সুবিধা হলো, Class Component ছাড়াই আপনি সব কাজ করতে পারবেন।

🔥 কেন Hooks ব্যবহার করবেন?

• Class Component লেখার প্রয়োজন নেই
• Code ছোট, clean এবং readable হয়
• Reusable logic লেখা সহজ হয়
• State & Lifecycle সহজভাবে ম্যানেজ করা যায়

🧩 useState Hook

useState হল component-এর ভেতরে data store করার জন্য ব্যবহৃত State Hook।

import React, { useState } from "react";
import { View, Text, Button } from "react-native";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 20 }}>Count: {count}</Text>
      <Button title="Increase" onPress={() => setCount(count + 1)} />
    </View>
  );
}

    

🌀 useEffect Hook

Component mount, update, API call, timer, event listener ইত্যাদি Side-effect handle করতে ব্যবহার হয়।

import React, { useEffect, useState } from "react";
import { View, Text } from "react-native";

export default function App() {
  const [message, setMessage] = useState("Loading...");

  useEffect(() => {
    setTimeout(() => {
      setMessage("Data Loaded Successfully!");
    }, 2000);
  }, []);

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 20 }}>{message}</Text>
    </View>
  );
}

    

📍 useRef Hook

React Native-এ DOM reference না থাকলেও useRef ব্যবহার করা হয়:

• Input focus নিয়ন্ত্রণ করতে
• Timer বা interval store করতে
• Previous value track করতে

import React, { useRef } from "react";
import { View, TextInput, Button } from "react-native";

export default function App() {
  const inputRef = useRef();

  return (
    <View style={{ padding: 20 }}>
      <TextInput 
        ref={inputRef}
        style={{ borderWidth: 1, padding: 10 }}
        placeholder="Type here"
      />

      <Button title="Focus Input" onPress={() => inputRef.current.focus()} />
    </View>
  );
}

    

⚡ useMemo Hook

Expensive calculation optimize করার জন্য useMemo ব্যবহার হয়।

const expensiveCalculation = (num) => {
  console.log("Calculating...");
  return num * 1000;
};

const result = useMemo(() => expensiveCalculation(count), [count]);

    

🎯 useCallback Hook

Re-render হলে function যেন নতুন করে তৈরি না হয় তার জন্য useCallback ব্যবহার করা হয়। এটি Performance boost করে।

const handleClick = useCallback(() => {
  console.log("Button Clicked");
}, []);

    

🔧 Custom Hooks (নিজস্ব Hook তৈরি)

আপনি চাইলে নিজের Custom Hook তৈরি করতে পারেন। যেমন Example — Window width detect করার Hook:

import { useEffect, useState } from "react";
import { Dimensions } from "react-native";

export const useDeviceWidth = () => {
  const [width, setWidth] = useState(Dimensions.get("window").width);

  useEffect(() => {
    const subscription = Dimensions.addEventListener("change", ({ window }) => {
      setWidth(window.width);
    });

    return () => subscription?.remove();
  }, []);

  return width;
};

    

📱 React Native-এ Hooks কীভাবে Help করে?

• Animation নিয়ন্ত্রণ সহজ
• Form management clean হয়
• API call সহজে manage করা যায়
• Lifecycle management সহজ
• State Sharing সহজ হয়
• Custom Hook দিয়ে reusable logic তৈরি করা যায়