react-expert

Map constructor state to useState, componentDidMount and componentDidUpdate to useEffect with proper dependencies, and componentWillUnmount to the effect cleanup function. Replace shouldComponentUpdate with React.memo and convert HOCs or render props to custom hooks.

Pass an async action function and initial state to useActionState, which returns the current state, a form action, and a pending flag. Attach the returned action to the form element and use isPending to disable inputs during submission.

Zustand suits medium-complexity state with minimal boilerplate and supports persistence middleware. Redux Toolkit fits complex state requiring middleware, devtools, and predictable action-based updates, while TanStack Query is preferred for server state and caching.

Use Server Components for data fetching, database access, and SEO-critical content since they support async/await without client bundle cost. Use Client Components marked with 'use client' when you need hooks, event handlers, or browser APIs.

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

Avoid migrating error boundaries, since componentDidCatch has no hook equivalent, and skip stable components that work and are not changing. Also avoid migration when third-party libraries require class inheritance or the team lacks hooks expertise.