ساخت یک کامپوننت Counter که از چندین هوک مختلف استفاده می‌کند

import React, { useState, useEffect, useRef, useContext, useMemo, useCallback } from 'react';

// ساخت یک کانتکست (Context)
const ThemeContext = React.createContext();

// کامپوننت فرزند
const ChildComponent = () => {
  // استفاده از کانتکست (Context) با useContext
  const theme = useContext(ThemeContext);

  // استفاده از رف (Ref) برای دسترسی به المان DOM
  const buttonRef = useRef(null);

  // استفاده از افکت (Effect) با useEffect
  useEffect(() => {
    // کدی که در لحظه‌های مختلف اجرا می‌شود
    console.log('Effect ran');
    // مثال: تنظیم فوکوس بر روی دکمه پس از رندر اولیه
    buttonRef.current.focus();
  }, []); // آرایه وابستگی خالی به این معناست که این اثر فقط در اولین رندر اجرا شود

  // استفاده از استیت (State) با useState
  const [count, setCount] = useState(0);

  // استفاده از استیت (State) با useReducer
  const reducer = (state, action) => {
    switch (action.type) {
      case 'increment':
        return state + 1;
      case 'decrement':
        return state - 1;
      default:
        return state;
    }
  };

  const [state, dispatch] = useReducer(reducer, 0);

  // استفاده از حفظ استیت (Memoization) با useMemo
  const squaredCount = useMemo(() => {
    console.log('Expensive calculation ran');
    return count * count;
  }, [count]);

  // استفاده از حفظ تعریف تابع (Callback) با useCallback
  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <div style={{ background: theme.background, color: theme.color }}>
      <p>Count: {count}</p>
      <p>Squared Count: {squaredCount}</p>
      <button ={increment} ref={buttonRef}>
        Increment
      </button>
    </div>
  );
};

// کامپوننت اصلی
const App = () => {
  // استفاده از کانتکست (Context) با useContext
  const theme = { background: 'lightblue', color: 'darkblue' };

  return (
    <ThemeContext.Provider value={theme}>
      <ChildComponent />
    </ThemeContext.Provider>
  );
};

export default App;