بهترین روش ها برای ایجاد قلاب های سفارشی قابل استفاده مجدد در React

// Good
function useCounter() {
    // hook logic
}

// Bad
function counterHook() {
    // hook logic
}

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

    const increment = () => setCount(count + 1);
    const decrement = () => setCount(count - 1);
    const reset = () => setCount(initialValue);

    return { count, increment, decrement, reset };
}

// Bad
function useComplexCounter(initialValue: number = 0, step: number = 1) {
    const [count, setCount] = useState(initialValue);

    const increment = () => setCount(count + step);
    const decrement = () => setCount(count - step);
    const reset = () => setCount(initialValue);
    const double = () => setCount(count * 2);
    const halve = () => setCount(count / 2);

    return { count, increment, decrement, reset, double, halve };
}

import { useEffect, useState } from 'react';

function useFetchData(url: string) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(url);
                const result = await response.json();
                setData(result);
            } catch (error) {
                console.error('Error fetching data:', error);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, [url]);

    return { data, loading };
}

export default useFetchData;

import { useState, useEffect } from 'react';

function useFetchData(url: string): { data: T | null, loading: boolean } {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch(url);
            const result = await response.json();
            setData(result);
            setLoading(false);
        };

        fetchData();
    }, [url]);

    return { data, loading };
}

export default useFetchData;

interface UseToggleOptions {
    initialValue?: boolean;
}

function useToggle(options?: UseToggleOptions) {
    const { initialValue = false } = options || {};
    const [value, setValue] = useState(initialValue);

    const toggle = () => setValue(!value);

    return [value, toggle] as const;
}

export default useToggle;

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

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

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

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

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

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

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

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

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

/**
 * useCounter - A custom hook to manage a counter.
 *
 * @param {number} [initialValue=0] - The initial value of the counter.
 * @returns {object} An object containing the count value and functions to increment, decrement, and reset the count.
 *
 * @example
 * const { count, increment, decrement, reset } = useCounter(10);
 */
function useCounter(initialValue: number = 0) {
    const [count, setCount] = useState(initialValue);

    const increment = () => setCount(count + 1);
    const decrement = () => setCount(count - 1);
    const reset = () => setCount(initialValue);

    return { count, increment, decrement, reset };
}

export default useCounter;