מדריך ריאקט – react hooks | Custom Hook

ברוכים הבאים לשיעור האחרון במדריך ריאקט – React Hooks . הפעם נעבור על איך לייצר הוק משלכם! מה שנקרא custom hook.

למה נחוץ לנו custom hooks

בריאקט יש לנו פוקציות (או קלאסים) שמייצגים רכיבים, כל רכיב מגיע עם היכולות שלו כגון : מבנה , פונקציונאליות , דטה , סטיילינג.

לפעמים נרצה להשמיש פונקציונליות זהה\דומה בין רכיבים שונים. וכאן נכנס לתמונה כל נושא של custom hooks.

בכל אפליקיצה או ממשק אתם תראו תקיות כמו share או util , שלרוב מאגדות פוקציונליות שמשותפת לאזורים שונים בממשק. עם ריאקט נוכל לייצר והשתמש הוקים משלנו בקלות רבה. למשל ניקח דוגמה לcustom hook אפשר לייצר עבור קריאות שונות של api . במקום להשתמש בfetch כמקומות שונים באפליקציה נוכל להגדיר זאת בעזרת useFetch .

כמה נקודות חשובות שבונים custom hook :

• שם הקובץ חייב להתחיל עם המילה use , והמשך השם זה כבר בחירה שלכם(use"+ any string you want").
• תמיד יקבל מידע בעזרת argument.
• תמיד תחזיר נתונים כמובן.
• לרוב יעשה שימוש בuseState.

בואו נממש את הדוגמה של useFetch:

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

function useFetch(url: string, options? : any) : {loading : boolean, error : Error | null, data: any} {
  const [data, setData] = useState<any>(null);  
  const [error, setError] = useState<Error | null >(null);  
  const [loading,setLoading ] = useState<boolean>(false);
  
  useEffect(() => {
      let isMouted: boolean = true;
      setLoading(true);
      
      fetch(url,options)
      .then(res=>res.json())
      .then(data=>{
          if(isMouted){
              setData(data);
              setError(null);
          }
      })
      .catch((error)=>{
          if(isMouted){
              setError(error);
              setData(null);
          }
      }).finally(()=>setLoading(false))
  }, [url,options]);
  return {loading, error , data}
};
export default useFetch;

כל אחד מאיתנו מכיר ויכול לנחש שלעשות קריאת של מידע מAPI הוא דבר נפוץ מאד ומשתמשים בו המון וגם באפליקציות ממש ממש פשוטות. פונקציונאליות זו נמצאת בשימוש חוזר ולכן custom hook הוא דבר נכון לעשות.

מה שחשוב להקפיד זה להשתמש ב use בתחילת השם של הפונקציה, ולדאוג שהיא תחזיר את המידע שאתה רוצים לרוב כתצורת אובייט כמו פה לעיל בשורה 27.

כנרצה להשתמש בזה באחד מהרכיבים שלנו כל שנצטרך לעשות זה כך:

import React from 'react'
import useFetch from './useFetch';

export default function ButtonClicked(props: any) {
   
    const {loading ,error , data} = useFetch('https://jsonplaceholder.typicode.com/posts');

      if (loading) return <p>Loading...</p>;
      if (error) return <p>Something went wrong...</p>;

    return (
        <div>
        {data && data.map((post: any)=>{
          return <p key={post.id}>{post.title}</p>
        })}
        </div>
    )
}

מה קורה פה בעצם,
ייבאנו את ה custom hook שלנו לרכיב והשתמשנו בAPI מאתר json placeholder . והגדרנו את loading ,error , data . ואז בחרנו להציג מערך של כותרות של פוסטים במידה והדטה הגיע בלי שגיאות.

כמה פשוט וכמה שימושי!

לסיכום custom hooks ומדריך ריאקט hooks

אז כפי שכבר ציינתי custom hooks מאד שימושיים, וגם אם זה נראה מעט מורכב לפעמים, זכרו כמה חשוב לדעת זאת והשקיעו מאמץ בלהעמיק את הידע שלכם סביב נושא hooks ככל שתוכלו.

קורס ריאקט hooks הגיע לסיומו, מקווה מאד שעזר לכם, מי שרוצה לשאול שאלות תמיד מוזמן להשאיר תגובה או לשלוח בצור קשר ואשמח לענות ולהרכיב על נושאים מסויימים במידת העיניין. בהמשך יהיו מיני קורסים בreact נוספים בנושאים \ תתי נושאים אחרים . בהצלחה לכם 🐊😀

פוסטים קשורים:

מדריך ריאקט – react hooks | useState מדריך ריאקט – react hooks | useRef מדריך ריאקט – react hooks | useContext מדריך ריאקט – react hooks | useReducer