Advanced Hooks: Custom Patterns and State

Hooks changed React from a class-based component hierarchy to a functional composition model.

The Rules of Hooks (Why they exist)

Hooks rely on the order in which they are called. React internalizes an array of "cells" for each component; each hook call corresponds to an index in that array. This is why you cannot call hooks inside loops or conditions.

Mastering useMemo and useCallback

These are for Referential Equality and Expensive Computation.

javascript code
// useMemo: Memoizes the result of a function
const filteredData = useMemo(() => {
    return data.filter(item => item.value > threshold);
}, [data, threshold]);

// useCallback: Memoizes the function definition itself
const handleHeaderClick = useCallback(() => {
    console.log("Header clicked");
}, []); // Empty deps = function identity never changes

Creating Complex Custom Hooks

Industry-level React code uses custom hooks to encapsulate complex logic.

javascript code
// useLocalStorage.js
function useLocalStorage(key, initialValue) {
    const [storedValue, setStoredValue] = useState(() => {
        try {
            const item = window.localStorage.getItem(key);
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            return initialValue;
        }
    });

    const setValue = (value) => {
        setStoredValue(value);
        window.localStorage.setItem(key, JSON.stringify(value));
    };

    return [storedValue, setValue];
}

Context API vs State Management

Use Context API for low-frequency updates (Theming, Auth). For high-frequency state (Form data, Game states), use specialized libraries like Zustand or Redux Toolkit to avoid unnecessary re-renders.