react-expert

Map constructor state to useState, lifecycle methods like componentDidMount to useEffect with proper dependencies, and shouldComponentUpdate to React.memo. Error boundaries have no hook equivalent, so keep those as class components.

Use useState for local state, Context for simple globals like theme, Zustand for medium complexity with minimal boilerplate, Redux Toolkit for complex state with devtools, and TanStack Query for server state and caching.

Server Components are the default in the App Router and can use async/await to fetch data directly without client bundle impact. Add the 'use client' directive only for components needing hooks, event handlers, or browser APIs.

Stale closures happen when effects capture outdated state due to missing dependencies. Fix them by using functional updates like setCount(prev => prev + 1) or adding all used values to the dependency array.

Use useMemo only for expensive calculations and useCallback only when passing functions to memoized children. Over-memoizing simple values adds overhead without benefit, so measure performance before optimizing.