Modern React Patterns: Hooks and Performance

1.Evolution of React

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

2.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]; }

3.Context API

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

4.Performance

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