Custom React 후크를 사용하여 복잡한 시나리오를 단순화합니다

function useCustomHook() {
  // Define state, effects, and logic here
  const [state, setState] = useState(initialValue);

  useEffect(() => {
    // Side effect logic
    return () => {
      // Cleanup logic
    };
  }, [dependencies]);

  return state;
}

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

  useEffect(() => {
    let isMounted = true;
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        if (isMounted) {
          setData(result);
          setLoading(false);
        }
      } catch (err) {
        if (isMounted) {
          setError(err);
          setLoading(false);
        }
      }
    };

    fetchData();

    return () => {
      isMounted = false;
    };
  }, [url]);

  return { data, loading, error };
}

import { useState, useEffect } 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;
}

// Usage
const debouncedSearchTerm = useDebounce(searchTerm, 500);

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

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

  useEffect(() => {
    let isMounted = true;
    const fetchData = async () => {
      if (cache.current[url]) {
        setData(cache.current[url]);
        setLoading(false);
      } else {
        try {
          const response = await fetch(url, options);
          const result = await response.json();
          if (isMounted) {
            cache.current[url] = result;
            setData(result);
            setLoading(false);
          }
        } catch (err) {
          if (isMounted) {
            setError(err);
            setLoading(false);
          }
        }
      }
    };

    fetchData();

    let interval;
    if (pollingInterval) {
      interval = setInterval(fetchData, pollingInterval);
    }

    return () => {
      isMounted = false;
      if (interval) clearInterval(interval);
    };
  }, [url, options, pollingInterval]);

  return { data, loading, error };
}

import { useState } from 'react';

function useForm(initialValues, validate) {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  const handleSubmit = (callback) => (e) => {
    e.preventDefault();
    const validationErrors = validate(values);
    setErrors(validationErrors);
    if (Object.keys(validationErrors).length === 0) {
      setIsSubmitting(true);
      callback();
      setIsSubmitting(false);
    }
  };

  return {
    values,
    errors,
    isSubmitting,
    handleChange,
    handleSubmit,
  };
}

// Usage
const validate = (values) => {
  const errors = {};
  if (!values.email) {
    errors.email="Email is required";
  }
  // Add more validation rules
  return errors;
};

const { values, errors, handleChange, handleSubmit } = useForm(
  { email: '' },
  validate
);

import { useState, useEffect } from 'react';

function useSubscription(dataSource) {
  const [data, setData] = useState(dataSource.getInitialData());

  useEffect(() => {
    const handleDataChange = (newData) => {
      setData(newData);
    };

    dataSource.subscribe(handleDataChange);

    return () => {
      dataSource.unsubscribe(handleDataChange);
    };
  }, [dataSource]);

  return data;
}

import React, { createContext, useContext, useReducer } from 'react';

const GlobalStateContext = createContext();
const GlobalDispatchContext = createContext();

const initialState = {
  user: null,
  theme: 'light',
};

function reducer(state, action) {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    case 'TOGGLE_THEME':
      return { ...state, theme: state.theme === 'light' ? 'dark' : 'light' };
    default:
      return state;
  }
}

export function GlobalProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    
      
        {children}
      
    
  );
}

export function useGlobalState() {
  return useContext(GlobalStateContext);
}

export function useGlobalDispatch() {
  return useContext(GlobalDispatchContext);
}

import { renderHook, act } from '@testing-library/react-hooks';
import useCounter from './useCounter';

test('should increment counter', () => {
  const { result } = renderHook(() => useCounter());

  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);
});

test('should reset counter', () => {
  const { result } = renderHook(() => useCounter());

  act(() => {
    result.current.increment();
    result.current.reset();
  });

  expect(result.current.count).toBe(0);
});

import { useMemo } from 'react';

function useExpensiveCalculation(input) {
  const result = useMemo(() => {
    return performExpensiveCalculation(input);
  }, [input]);

  return result;
}

import { useCallback } from 'react';

function useDebouncedCallback(callback, delay) {
  const debouncedCallback = useCallback(
    (...args) => {
      const handler = setTimeout(() => {
        callback(...args);
      }, delay);

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

  return debouncedCallback;
}