ReactJS နားလည်ထားသူများသူဖတ်ပါ။

React နဲ့ Development လုပ်တဲ့အခါ

Component ထဲမှာ logic တွေများနေတာက ရေးလို့ရတယ်ဆိုပေမဲ့ 

logic တွေများလာ code ကိုဖတ်ရတာ maintain လုပ်ရတာ ရှုပ်လာမှာပါ

အဲ့အတွက် custom logic တွေကို react custom hook ကိုသုံးပီးခွဲထုတ်နိုင်ပါတယ်

အောက်က Blog Component ကိုကြည့်ပါ။

import React, { useEffect, useState } from "react";
import axios from "axios";
const Blog = () => {
  //ဒီ logic တွေက app မှာ features
  //များလာတာနဲ့အမျှ component ထဲမှာ ရေးဖို့မသင့်တော်တော့ပါဘူး
  const [data, setData] = useState([]);
  const [loader, setLoader] = useState(true);
  useEffect(() => {
    axios.get("api").then(({ data }) => {
      setData(data);
      setLoader(false);
    });
  }, []);
  //ဒီ logic တွေက app မှာ features
  //များလာတာနဲ့အမျှ component ထဲမှာ ရေးဖို့မသင့်တော်တော့ပါဘူး

  return <div>Loop Blogsdiv>;
};

export default Blog;

hooks/useFetch.js 

ဒီဖိုင်အရင်ဖန်တီးလိုက်ပါမယ်။

အခုရေးမဲ့ hook က api consume လုပ်မဲ့ logic ကို  ခဲွထုတ်ပေးမှာဖြစ်ပီး

api consume လုပ်တဲ့ ဘယ်လို react component မျိုးကမဆိုုဒီ hook ကို အသုံးပြုနိုင်မှာဖြစ်ပါတယ်။

url or api paramater တောင်းထားတာကိုသတိပြုပါ။

custom hook တွေက react component တွေလိုပဲ react မှာရှိပီးသား logic တွေ code တွေကို

အသုံးပြုနိုင်မှာဖြစ်ပါတယ်။

hook တွေက သူ့ကိုသုံးရင် ပြန်မဲ့ data တွေကို export ထားပေးဖို့လိုပါတယ်။

ဒါကတော့ ကိုယ့် app ရဲ့  logic အလိုက် သင့်တော်သလို ရေးယူရမှာဖြစ်ပါတယ်။

အခုတော့ useFetch ဆိုတဲ့ hook ကိုသုံးမယ်ဆိုရင်

errro , loader , data ကို export လုပ်ထားပါတယ်။

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

const useFetch = (url) => {
  const [data, setData] = useState();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);

  const fetchUrl = async () => {
    try {
      setLoading(true);
      const { data } = await axios.get(url);
      setData(data);
      setLoading(false);
    } catch (e) {
      setError(e);
    }
  };

  useEffect(() => {
    setLoading(true);
    fetchUrl();
  }, [url]);

  return { data, loading, error };
};

export default useFetch;

အပေါ် က blog component မှာ useFetch Hook ကိုပြန်သုံးကြရအောင်။

import React from "react";
import useFetch from "./hooks/useFetch";
const Blog = () => {
  //useFetch Hook က return ထားတဲ့ data တွေကို
  //အသုံးပြုပါမယ်
  const { error, loader, data } = useFetch("api_url");

  return (
    <>
      {loader && "loader component"}
      {!loader && <div>loop blogsdiv>}
    
  );
};

export default Blog;

ဒါဆိုရင် component မှာ appနဲ့ဆိုင်တဲ့ (fetch) logic တွေ

clean ဖြစ်သွားပါပီ။

See you next article guyz!