React Hooks Overview

Hooks allow you to use state and lifecycle methods in functional components, introduced in React 16.8.

Benefits

• Simpler than class components
• Better code reusability
• Easier testing
• Better TypeScript support

useState Hook

Basic Usage

const [count, setCount] = useState(0);

Features:

• Manages component state
• Returns current value and setter function
• Can store any type of value
• Multiple state variables allowed

useEffect Hook

Basic Usage

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

Use Cases:

• Data fetching
• Subscriptions
• Manual DOM changes
• Timers and intervals

Custom Hooks

Benefits:

• Extract component logic
• Share logic between components
• Easier testing and maintenance
• Follow single responsibility principle

Example Custom Hook:

function useLocalStorage(key, initialValue) {
    const [value, setValue] = useState(
        () => localStorage.getItem(key) || initialValue
    );
    
    const setStoredValue = (value) => {
        setValue(value);
        localStorage.setItem(key, value);
    };
    
    return [value, setStoredValue];
}

Rules of Hooks

1. Only call hooks at the top level
2. Only call hooks from React functions
3. Use ESLint plugin to enforce rules