M

MLOG

עברית

למדו כיצד להשתמש ב-Custom Hooks של React לחילוץ ושימוש חוזר בלוגיקת קומפוננטות, לשיפור התחזוקתיות, הבדיקות וארכיטקטורת האפליקציה.

React Custom Hooks: חילוץ לוגיקה של קומפוננטות לשימוש חוזר

ה-Hooks של React חוללו מהפכה באופן שבו אנו כותבים קומפוננטות React, והציעו דרך אלגנטית ויעילה יותר לנהל מצב (state) ותופעות לוואי (side effects). מבין ה-hooks השונים הזמינים, ה-custom hooks בולטים ככלי רב עוצמה לחילוץ ושימוש חוזר בלוגיקה של קומפוננטות. מאמר זה מספק מדריך מקיף להבנה ויישום של React custom hooks, ומאפשר לכם לבנות אפליקציות שקל יותר לתחזק, לבדוק ולהרחיב.

מהם React Custom Hooks?

במהותו, custom hook הוא פונקציית JavaScript ששמה מתחיל ב-"use" והיא יכולה לקרוא ל-hooks אחרים. הוא מאפשר לכם לחלץ לוגיקה של קומפוננטות לפונקציות לשימוש חוזר, ובכך למנוע שכפול קוד ולקדם מבנה קומפוננטה נקי יותר. בניגוד לקומפוננטות React רגילות, custom hooks אינם מרנדרים שום ממשק משתמש (UI); הם פשוט עוטפים לוגיקה.

חשבו עליהם כפונקציות לשימוש חוזר שיכולות לגשת למצב ולמאפייני מחזור החיים של React. הם דרך פנטסטית לחלוק לוגיקה בעלת מצב (stateful logic) בין קומפוננטות שונות מבלי להזדקק ל-higher-order components או render props, שלעיתים קרובות יכולים להוביל לקוד שקשה לקרוא ולתחזק.

מדוע להשתמש ב-Custom Hooks?

היתרונות של שימוש ב-custom hooks הם רבים:

יצירת ה-Custom Hook הראשון שלכם

בואו נדגים את היצירה והשימוש ב-custom hook עם דוגמה מעשית: שליפת נתונים מ-API.

דוגמה: useFetch – הוק לשליפת נתונים

דמיינו שאתם צריכים לעיתים קרובות לשלוף נתונים מממשקי API שונים באפליקציית ה-React שלכם. במקום לחזור על לוגיקת השליפה בכל קומפוננטה, אתם יכולים ליצור hook בשם useFetch.


import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url, { signal: signal });
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setError(null); // Clear any previous errors
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          setError(error);
        }
        setData(null); // Clear any previous data
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      abortController.abort(); // Cleanup function to abort the fetch on unmount or URL change
    };
  }, [url]); // Re-run effect when the URL changes

  return { data, loading, error };
}

export default useFetch;

הסבר:

שימוש ב-hook useFetch בקומפוננטה

כעת, בואו נראה כיצד להשתמש ב-custom hook הזה בקומפוננטת React:


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

function UserList() {
  const { data: users, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users');

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

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
}

export default UserList;

הסבר:

תבניות מתקדמות ל-Custom Hooks

מעבר לשליפת נתונים פשוטה, ניתן להשתמש ב-custom hooks כדי לעטוף לוגיקה מורכבת יותר. הנה כמה תבניות מתקדמות:

1. ניהול מצב עם useReducer

לתרחישי ניהול מצב מורכבים יותר, ניתן לשלב custom hooks עם useReducer. זה מאפשר לכם לנהל מעברי מצב בצורה צפויה ומאורגנת יותר.


import { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function useCounter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement' });

  return { count: state.count, increment, decrement };
}

export default useCounter;

שימוש:


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

function Counter() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

2. שילוב עם Context באמצעות useContext

ניתן להשתמש ב-Custom hooks גם כדי לפשט את הגישה ל-React Context. במקום להשתמש ב-useContext ישירות בקומפוננטות, ניתן ליצור custom hook שעוטף את לוגיקת הגישה ל-context.


import { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // Assuming you have a ThemeContext

function useTheme() {
  return useContext(ThemeContext);
}

export default useTheme;

שימוש:


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

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div style={{ backgroundColor: theme.background, color: theme.color }}>
      <p>This is my component.</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default MyComponent;

3. Debouncing ו-Throttling

Debouncing ו-throttling הן טכניקות המשמשות לשליטה בקצב שבו פונקציה מופעלת. ניתן להשתמש ב-Custom hooks כדי לעטוף את הלוגיקה הזו, מה שמקל על יישום טכניקות אלו על event handlers.


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

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

שימוש:


import React, { useState } from 'react';
import useDebounce from './useDebounce';

function SearchInput() {
  const [searchValue, setSearchValue] = useState('');
  const debouncedSearchValue = useDebounce(searchValue, 500); // Debounce for 500ms

  useEffect(() => {
    // Perform search with debouncedSearchValue
    console.log('Searching for:', debouncedSearchValue);
    // Replace console.log with your actual search logic
  }, [debouncedSearchValue]);

  const handleChange = (event) => {
    setSearchValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={searchValue}
      onChange={handleChange}
      placeholder="Search..."
    />
  );
}

export default SearchInput;

שיטות עבודה מומלצות לכתיבת Custom Hooks

כדי להבטיח שה-custom hooks שלכם יהיו יעילים וקלים לתחזוקה, עקבו אחר השיטות המומלצות הבאות:

שיקולים גלובליים

בעת פיתוח אפליקציות לקהל גלובלי, יש לזכור את הדברים הבאים:

דוגמה: עיצוב תאריך מותאם בינלאומית עם Custom Hook


import { useState, useEffect } from 'react';
import { DateTimeFormat } from 'intl';

function useFormattedDate(date, locale) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    try {
      const formatter = new DateTimeFormat(locale, {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      });
      setFormattedDate(formatter.format(date));
    } catch (error) {
      console.error('Error formatting date:', error);
      setFormattedDate('Invalid Date');
    }
  }, [date, locale]);

  return formattedDate;
}

export default useFormattedDate;

שימוש:


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

function MyComponent() {
  const today = new Date();
  const enDate = useFormattedDate(today, 'en-US');
  const frDate = useFormattedDate(today, 'fr-FR');
  const deDate = useFormattedDate(today, 'de-DE');

  return (
    <div>
      <p>US Date: {enDate}</p>
      <p>French Date: {frDate}</p>
      <p>German Date: {deDate}</p>
    </div>
  );
}

export default MyComponent;

סיכום

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