useEffect এর মাধ্যমে API Calls হ্যান্ডল করা

ReactJS-এ useEffect হুকটি কম্পোনেন্টের সাইড এফেক্টস পরিচালনা করার জন্য ব্যবহৃত হয়। API কল করা বা ডেটা ফেচ করা এমন একটি সাইড এফেক্ট যা সাধারণত useEffect হুকের মাধ্যমে করা হয়। useEffect হুকের সাহায্যে আপনি API কল করতে পারেন এবং সেই ডেটা আসার পর UI আপডেট করতে পারেন।

এই টিউটোরিয়ালে, আমরা দেখব কিভাবে useEffect হুকটি ব্যবহার করে API কল করা যায় এবং সেই ডেটা কম্পোনেন্টে রেন্ডার করা যায়।

useEffect হুক এবং API কল

useEffect হুকটি একটি ফাংশন হিসেবে কাজ করে, যেটি কম্পোনেন্ট রেন্ডার হওয়ার পর একটি নির্দিষ্ট কাজ বা সাইড এফেক্ট সম্পাদন করে। API কলের জন্য, আপনি সাধারণত fetch বা axios ব্যবহার করেন এবং সেই ডেটা রেসপন্সের পর কম্পোনেন্টের স্টেটে সেট করেন।

useEffect ব্যবহার করে API কল করা

১. fetch API এর মাধ্যমে

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);  // ডেটা স্টেট
  const [loading, setLoading] = useState(true);  // লোডিং স্টেট
  const [error, setError] = useState(null);    // এরর স্টেট

  useEffect(() => {
    // API কল
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())  // রেসপন্স JSON ফরম্যাটে রূপান্তর
      .then((data) => {
        setData(data);   // ডেটা স্টেটে সেট করা
        setLoading(false); // লোডিং ফ্ল্যাগ অফ করা
      })
      .catch((error) => {
        setError(error);  // এরর স্টেটে সেট করা
        setLoading(false);  // লোডিং ফ্ল্যাগ অফ করা
      });
  }, []);  // Dependency array খালি থাকলে, কম্পোনেন্ট একবার রেন্ডার হওয়ার পরই এই কোডটি রান হবে

  if (loading) return <p>Loading...</p>;  // লোডিং চলাকালীন মেসেজ
  if (error) return <p>Error: {error.message}</p>;  // যদি কোনো এরর হয়

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataFetcher;

ব্যাখ্যা:

1. useState: আমরা তিনটি স্টেট ব্যবহার করছি:
   • data API থেকে আসা ডেটা ধারণ করতে।
   • loading লোডিং স্টেটের জন্য।
   • error যদি কোনো সমস্যা হয় তবে এরর মেসেজ রাখার জন্য।
2. useEffect: এটি কম্পোনেন্ট রেন্ডার হওয়ার পর একটি API কল করার জন্য ব্যবহৃত হয়েছে।
   • এখানে fetch() ফাংশন ব্যবহার করা হয়েছে। এটি একটি প্রমিজ রিটার্ন করে, যা API থেকে ডেটা ফেচ করতে ব্যবহৃত হয়।
   • setData() এবং setError() ব্যবহার করে স্টেট আপডেট করা হয়েছে।
3. [] (ডিপেনডেন্সি অ্যারে): ডিপেনডেন্সি অ্যারে খালি থাকলে, এটি কম্পোনেন্টের প্রথম রেন্ডার হওয়ার পর একবারই API কল করবে।

useEffect এবং axios এর মাধ্যমে API কল করা

axios একটি পপুলার HTTP ক্লায়েন্ট যা API কল করার জন্য ব্যবহৃত হয়। এটি fetch এর তুলনায় কিছু অতিরিক্ত সুবিধা প্রদান করে, যেমন ইরর হ্যান্ডলিং সহজ করা এবং রিকোয়েস্ট কনফিগারেশন প্রদান করা।

উদাহরণ:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function DataFetcher() {
  const [data, setData] = useState(null);  // ডেটা স্টেট
  const [loading, setLoading] = useState(true);  // লোডিং স্টেট
  const [error, setError] = useState(null);    // এরর স্টেট

  useEffect(() => {
    // API কল
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);  // ডেটা স্টেটে সেট করা
        setLoading(false);  // লোডিং ফ্ল্যাগ অফ করা
      })
      .catch((error) => {
        setError(error);  // এরর স্টেটে সেট করা
        setLoading(false);  // লোডিং ফ্ল্যাগ অফ করা
      });
  }, []);  // Dependency array খালি থাকলে, কম্পোনেন্ট একবার রেন্ডার হওয়ার পরই এই কোডটি রান হবে

  if (loading) return <p>Loading...</p>;  // লোডিং চলাকালীন মেসেজ
  if (error) return <p>Error: {error.message}</p>;  // যদি কোনো এরর হয়

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataFetcher;

ব্যাখ্যা:

1. axios.get(): axios.get() ব্যবহার করে API থেকে ডেটা ফেচ করা হয়েছে। এটি fetch এর মতো কাজ করে, তবে এতে আরো কিছু সুবিধা যেমন, ইরর হ্যান্ডলিং, কনফিগারেশন এবং ডেটা ট্রান্সফর্মেশন রয়েছে।
2. response.data: API থেকে আসা ডেটা response.data এর মাধ্যমে পাওয়া যায় এবং এটি setData() স্টেট ফাংশনে সেট করা হয়।

useEffect-এ Cleanup (API কলের জন্য)

যখন একটি কম্পোনেন্ট আনমাউন্ট (unmount) হয়, তখন API কলের জন্য কিছু ক্লিনআপ প্রয়োজন হতে পারে, যেমন অ্যাক্সিওস রিকোয়েস্ট ক্যান্সেল করা অথবা কোন অ্যাসিনক্রোনাস কাজ শেষ হওয়ার আগে স্টেট আপডেট না হওয়া নিশ্চিত করা।

ক্লিনআপ উদাহরণ:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const source = axios.CancelToken.source();  // API কল ক্যান্সেল করার জন্য টোকেন তৈরি

    axios.get('https://jsonplaceholder.typicode.com/posts', {
      cancelToken: source.token
    })
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        if (axios.isCancel(error)) {
          console.log('Request canceled', error.message);
        } else {
          setError(error);
          setLoading(false);
        }
      });

    return () => {
      source.cancel("Operation canceled by the user.");  // ক্লিনআপ ফাংশন
    };
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataFetcher;

এখানে, axios.CancelToken ব্যবহার করে API কল ক্যান্সেল করার একটি ক্লিনআপ মেকানিজম তৈরি করা হয়েছে। এই পদ্ধতিটি API কল দীর্ঘ সময় নিলেও কম্পোনেন্টটি যদি আনমাউন্ট হয়, তবে স্টেট আপডেট হবে না এবং ক্যান্সেল করা হবে।

সারাংশ

useEffect হুক ReactJS-এ API কল বা অন্যান্য সাইড এফেক্টস পরিচালনা করার জন্য অত্যন্ত শক্তিশালী একটি টুল। আপনি fetch অথবা axios ব্যবহার করে API কল করতে পারেন এবং সেই ডেটা স্টেটে সেট করে UI আপডেট করতে পারেন। এটি কম্পোনেন্টের লোডিং, এরর এবং ডেটা হ্যান্ডলিং করতে সহায়তা করে।