Modern React Patterns: Hooks and Performance

Evolution of React

React has evolved with hooks, context, and advanced patterns for cleaner code.

Custom Hooks

function useLocalStorage(key: string, initialValue: T) {
  const [value, setValue] = useState(() => {
    const item = localStorage.getItem(key);
    return item ? JSON.parse(item) : initialValue;
  });
  
  const setStoredValue = (newValue: T) => {
    setValue(newValue);
    localStorage.setItem(key, JSON.stringify(newValue));
  };
  
  return [value, setStoredValue];
}

Context API

const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  return (
    
      {children}
    
  );
}

Performance

Use useMemo, useCallback, and React.memo for optimization.