การประกอบ Custom Hook ใน React: การจัดการตรรกะที่ซับซ้อนสำหรับนักพัฒนาทั่วโลก

            // useFetch.js
import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(url, options);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url, JSON.stringify(options)]); // Dependencies for re-fetching

  return { data, loading, error };
}

export default useFetch;

// usePagination.js
import { useState } from 'react';

function usePagination(totalPages, initialPage = 1) {
  const [currentPage, setCurrentPage] = useState(initialPage);

  const nextPage = () => {
    if (currentPage < totalPages) {
      setCurrentPage(currentPage + 1);
    }
  };

  const prevPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1);
    }
  };

  const goToPage = (page) => {
    if (page >= 1 && page <= totalPages) {
      setCurrentPage(page);
    }
  };

  return {
    currentPage,
    totalPages,
    nextPage,
    prevPage,
    goToPage,
    setPage: setCurrentPage // Direct setter if needed
  };
}

export default usePagination;

// usePaginatedFetch.js (Composed Hook)
import useFetch from './useFetch';
import usePagination from './usePagination';

function usePaginatedFetch(baseUrl, initialPage = 1, itemsPerPage = 10) {
  // We need to know total pages to initialize usePagination. This might require an initial fetch or an external source.
  // For simplicity here, let's assume totalPages is somehow known or fetched separately first.
  // A more robust solution would fetch total pages first or use a server-driven pagination approach.

  // Placeholder for totalPages - in a real app, this would come from an API response.
  const [totalPages, setTotalPages] = useState(1);
  const [apiData, setApiData] = useState(null);
  const [fetchLoading, setFetchLoading] = useState(true);
  const [fetchError, setFetchError] = useState(null);

  // Use pagination hook to manage page state
  const { currentPage, ...paginationControls } = usePagination(totalPages, initialPage);

  // Construct the URL for the current page
  const apiUrl = `${baseUrl}?page=${currentPage}&limit=${itemsPerPage}`;

  // Use fetch hook to get data for the current page
  const { data: pageData, loading: pageLoading, error: pageError } = useFetch(apiUrl);

  // Effect to update totalPages and data when pageData changes or initial fetch happens
  useEffect(() => {
    if (pageData) {
      // Assuming the API response has a structure like { items: [...], total: N }
      setApiData(pageData.items || pageData);
      if (pageData.total !== undefined && pageData.total !== totalPages) {
        setTotalPages(Math.ceil(pageData.total / itemsPerPage));
      } else if (Array.isArray(pageData)) { // Fallback if total is not provided
        setTotalPages(Math.max(1, Math.ceil(pageData.length / itemsPerPage)));
      }
      setFetchLoading(false);
    } else {
      setApiData(null);
      setFetchLoading(pageLoading);
    }
    setFetchError(pageError);
  }, [pageData, pageLoading, pageError, itemsPerPage, totalPages]);

  return {
    data: apiData,
    loading: fetchLoading,
    error: fetchError,
    ...paginationControls // Spread pagination controls (nextPage, prevPage, etc.)
  };
}

export default usePaginatedFetch;

            

              
                Copy
              
            
          

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

function ProductList() {
  const apiUrl = 'https://api.example.com/products'; // Replace with your API endpoint
  const { data: products, loading, error, nextPage, prevPage, currentPage, totalPages } = usePaginatedFetch(apiUrl, 1, 5);

  if (loading) return 
Loading products...
;
  if (error) return 
Error loading products: {error.message}
;
  if (!products || products.length === 0) return 
No products found.
;

  return (
    

      
Products
      

        {products.map(product => (
          
{product.name}
        ))}
      
      

        Previous
         Page {currentPage} of {totalPages} 
        Next
      
    
  );
}

export default ProductList;

            

              
                Copy
              
            
          

            // useWebSocket.js (Helper hook for WebSocket)
import { useState, useEffect } from 'react';

function useWebSocket(url) {
  const [message, setMessage] = useState(null);
  const [isConnecting, setIsConnecting] = useState(true);
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    if (!url) return;
    setIsConnecting(true);
    setIsConnected(false);
    const ws = new WebSocket(url);

    ws.onopen = () => {
      console.log('WebSocket Connected');
      setIsConnected(true);
      setIsConnecting(false);
    };

    ws.onmessage = (event) => {
      try {
        const data = JSON.parse(event.data);
        setMessage(data);
      } catch (e) {
        console.error('Error parsing WebSocket message:', e);
        setMessage(event.data); // Handle non-JSON messages if necessary
      }
    };

    ws.onclose = () => {
      console.log('WebSocket Disconnected');
      setIsConnected(false);
      setIsConnecting(false);
      // Optional: Implement reconnection logic here
    };

    ws.onerror = (error) => {
      console.error('WebSocket Error:', error);
      setIsConnected(false);
      setIsConnecting(false);
    };

    // Cleanup function
    return () => {
      if (ws.readyState === WebSocket.OPEN) {
        ws.close();
      }
    };
  }, [url]);

  return { message, isConnecting, isConnected };
}

export default useWebSocket;

// useFetchWithRealtime.js (Composed Hook)
import useFetch from './useFetch';
import useWebSocket from './useWebSocket';

function useFetchWithRealtime(fetchUrl, realtimeUrl, initialData = null) {
  const fetchResult = useFetch(fetchUrl);
  // Assuming the realtime updates are based on the same resource or a related one
  // The structure of realtime messages needs to align with how we update fetchResult.data
  const { message: realtimeMessage } = useWebSocket(realtimeUrl);

  const [combinedData, setCombinedData] = useState(initialData);
  const [isRealtimeUpdating, setIsRealtimeUpdating] = useState(false);

  // Effect to integrate realtime updates with fetched data
  useEffect(() => {
    if (fetchResult.data) {
      // Initialize combinedData with the initial fetch data
      setCombinedData(fetchResult.data);
      setIsRealtimeUpdating(false);
    }
  }, [fetchResult.data]);

  useEffect(() => {
    if (realtimeMessage && fetchResult.data) {
      setIsRealtimeUpdating(true);
      // Logic to merge or replace data based on realtimeMessage
      // This is highly dependent on your API and realtime message structure.
      // Example: If realtimeMessage contains an updated item for a list:
      if (Array.isArray(fetchResult.data)) {
        setCombinedData(prevData => {
          const updatedItems = prevData.map(item =>
            item.id === realtimeMessage.id ? { ...item, ...realtimeMessage } : item
          );
          // If the realtime message is for a new item, you might push it.
          // If it's for a deleted item, you might filter it out.
          return updatedItems;
        });
      } else if (typeof fetchResult.data === 'object' && fetchResult.data !== null) {
        // Example: If it's a single object update
        if (realtimeMessage.id === fetchResult.data.id) {
          setCombinedData({ ...fetchResult.data, ...realtimeMessage });
        }
      }
      // Reset updating flag after a short delay or handle differently
      const timer = setTimeout(() => setIsRealtimeUpdating(false), 500);
      return () => clearTimeout(timer);
    }
  }, [realtimeMessage, fetchResult.data]); // Dependencies for reacting to updates

  return {
    data: combinedData,
    loading: fetchResult.loading,
    error: fetchResult.error,
    isRealtimeUpdating
  };
}

export default useFetchWithRealtime;

            

              
                Copy
              
            
          

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

function DashboardWidgets() {
  const dataUrl = 'https://api.example.com/widgets';
  const wsUrl = 'wss://api.example.com/widgets/updates'; // WebSocket endpoint

  const { data: widgets, loading, error, isRealtimeUpdating } = useFetchWithRealtime(dataUrl, wsUrl);

  if (loading) return 
Loading widgets...
;
  if (error) return 
Error: {error.message}
;

  return (
    

      
Widgets
      {isRealtimeUpdating && 
Updating...
}
      

        {widgets.map(widget => (
          
{widget.name} - Status: {widget.status}
        ))}
      
    
  );
}

export default DashboardWidgets;

            

              
                Copy
              
            
          

            // useLocalStorage.js
import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error('Error reading from localStorage:', error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore = typeof value === 'function' ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error('Error writing to localStorage:', error);
    }
  };

  return [storedValue, setValue];
}

export default useLocalStorage;

// UserPreferencesContext.js
import React, { createContext, useContext } from 'react';
import useLocalStorage from './useLocalStorage';

const UserPreferencesContext = createContext();

export const UserPreferencesProvider = ({ children }) => {
  const [theme, setTheme] = useLocalStorage('app-theme', 'light');
  const [language, setLanguage] = useLocalStorage('app-language', 'en');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  const changeLanguage = (lang) => {
    setLanguage(lang);
  };

  return (
    
      {children}
    
  );
};

// useUserPreferences.js (Custom hook for consuming context)
import { useContext } from 'react';
import { UserPreferencesContext } from './UserPreferencesContext';

function useUserPreferences() {
  const context = useContext(UserPreferencesContext);
  if (context === undefined) {
    throw new Error('useUserPreferences must be used within a UserPreferencesProvider');
  }
  return context;
}

export default useUserPreferences;

            

              
                Copy
              
            
          

            
// App.js
import React from 'react';
import { UserPreferencesProvider } from './UserPreferencesContext';
import UserProfile from './UserProfile';
import SettingsPanel from './SettingsPanel';

function App() {
  return (
    
      
      
    
  );
}

export default App;

// UserProfile.js
import React from 'react';
import useUserPreferences from './useUserPreferences';

function UserProfile() {
  const { theme, language } = useUserPreferences();

  return (
    

      
User Profile
      
Language: {language}
      
Current Theme: {theme}
    
  );
}

export default UserProfile;

// SettingsPanel.js
import React from 'react';
import useUserPreferences from './useUserPreferences';

function SettingsPanel() {
  const { theme, toggleTheme, language, changeLanguage } = useUserPreferences();

  return (
    

      
Settings
      
        Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode
      
      

        Language:
         changeLanguage(e.target.value)}>
          English
          Español
          Français
          {/* Add more languages as needed */}
        
      
    
  );
}

export default SettingsPanel;

            

              
                Copy
              
            
          

            // useCounter.js (A simple hook to log)
import { useState } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);

  return { count, increment, decrement };
}

export default useCounter;

// withLogging.js (Higher-order hook)
import { useRef, useEffect } from 'react';

function withLogging(WrappedHook) {
  // Return a new hook that wraps the original
  return (...args) => {
    const hookResult = WrappedHook(...args);
    const hookName = WrappedHook.name || 'AnonymousHook'; // Get hook name for logging
    const previousResultRef = useRef();

    useEffect(() => {
      if (previousResultRef.current) {
        console.log(`%c[${hookName}] Change detected:`, 'color: blue; font-weight: bold;', {
          previous: previousResultRef.current,
          current: hookResult
        });
      } else {
        console.log(`%c[${hookName}] Initial render:`, 'color: green; font-weight: bold;', hookResult);
      }
      previousResultRef.current = hookResult;
    }, [hookResult, hookName]); // Re-run effect if hookResult or hookName changes

    return hookResult;
  };
}

export default withLogging;

            

              
                Copy
              
            
          

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

// Create a logged version of useCounter
const useLoggedCounter = withLogging(useCounter);

function CounterComponent() {
  // Use the enhanced hook
  const { count, increment, decrement } = useLoggedCounter(0);

  return (
    

      
Counter
      
Count: {count}
      Increment
      Decrement
    
  );
}

export default CounterComponent;

            

              
                Copy