React Hooks for Beginners | useState & useEffect

React Hooks for Beginners!
React নিয়ে কাজ করতে গেলে একটা সময় সবাই একই সমস্যায় পড়ে state manage করা, lifecycle handle করা, আর code clean রাখা।

আগে React-এ এই কাজগুলো করতে হলে class component ব্যবহার করতে হতো, যা অনেক সময় complex হয়ে যেত।

এই সমস্যার সমাধান হিসেবেই React team নিয়ে আসে React Hooks।

Hooks মূলত এমন কিছু built-in functions যা React functional component-এর ভিতরে state এবং lifecycle feature ব্যবহার করার সুযোগ দেয়।

সহজভাবে বললে: রিঅ্যাক্ট হুকস = Functional component এর superpower.

What are React Hooks?

রিঅ্যাক্ট হুকস হলো JavaScript functions যা React-এর বিশেষ কিছু feature ব্যবহার করতে সাহায্য করে functional component-এর ভিতরে।

হুকস আসার আগে React-এ দুই ধরনের component ছিল:

• Class Component
• Functional Component

Functional component তখন শুধু UI render করত। কিন্তু Hooks আসার পর functional component দিয়েই state, side effect, lifecycle সব manage করা সম্ভব হয়েছে।

উদাহরণ:

import { useState } from "react";function Counter() {
  const [count, setCount] = useState(0);  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

এখানে useState hook ব্যবহার করে component-এর state manage করা হচ্ছে।

Why React Hooks are Important

রিঅ্যাক্ট হুকস ব্যবহার করার কয়েকটি গুরুত্বপূর্ণ কারণ আছে।

1. Code অনেক Clean হয়

Class component-এ অনেক boilerplate code লিখতে হতো। Hooks ব্যবহার করলে code ছোট এবং readable হয়।

2. Logic Reuse করা সহজ

Hooks ব্যবহার করে logic reuse করা যায় custom hooks এর মাধ্যমে।

3. Functional Component Powerful হয়

আগে functional component শুধু UI render করত। এখন state, lifecycle সব handle করতে পারে।

4. React Team এর Recommended Approach

Modern React development-এ Hooks হলো recommended pattern।

Most Common React Hooks

React-এ অনেক হুকস আছে, তবে কিছু হুকস প্রায় সব project-এই ব্যবহার হয়।

useState

useState hook ব্যবহার করা হয় component-এর state manage করার জন্য।

Example:

const [name, setName] = useState("");

এখানে

• name = current state
• setName = state update করার function

useEffect

useEffect hook ব্যবহার করা হয় side effects handle করার জন্য।

যেমন:

• API call
• DOM update
• Event listener

Example:

import { useEffect } from "react";useEffect(() => {
  console.log("Component mounted");
}, []);

এখানে component load হলে console message show করবে।

useRef

useRef সাধারণত DOM element access করার জন্য ব্যবহার করা হয়।

Example:

const inputRef = useRef(null);<input ref={inputRef} />

useContext

useContext ব্যবহার করা হয় global data share করার জন্য।

যেমন:

• user authentication
• theme
• language

Rules of Using React Hooks

রিঅ্যাক্ট হুকস ব্যবহার করার সময় কিছু নিয়ম মানতে হয়।

Rule 1

Hooks শুধুমাত্র React functional component বা custom hook এর ভিতরে ব্যবহার করা যাবে।

Rule 2

Hooks সবসময় component এর top level-এ call করতে হবে। Loop বা condition এর ভিতরে call করা যাবে না।

ভুল উদাহরণ:

if (true) {
  useState();
}

What is a Custom Hook in React?

React-এ নিজের প্রয়োজন অনুযায়ী hook বানানো যায়। এটাকে বলা হয় Custom Hook।

Example:

function useCounter() {
  const [count, setCount] = useState(0);  function increase() {
    setCount(count + 1);
  }  return { count, increase };
}

এভাবে reusable logic তৈরি করা যায়।

Advantages of React Hooks

এটি modern React development-কে অনেক সহজ করে দিয়েছে।

Hooks ব্যবহার করলে developer-রা clean code লিখতে পারে এবং complex logic সহজভাবে manage করতে পারে।

Hooks এর সবচেয়ে বড় সুবিধা হলো functional programming style maintain করা যায় এবং component logic reuse করা সহজ হয়।

আজকের প্রায় সব modern React project-এ Hooks ব্যবহার করা হয়।

রিঅ্যাক্ট হুকস React development-এর একটি powerful feature যা functional component-কে অনেক বেশি capable করে তুলেছে।

useState, useEffect, useRef এবং useContext এর মতো hooks ব্যবহার করে সহজেই state management, side effects এবং data sharing handle করা যায়।

যদি আপনি modern React developer হতে চান, তাহলে রিঅ্যাক্ট হুকস ভালোভাবে শেখা almost mandatory।