react-expert

Map constructor state to useState, componentDidMount and componentDidUpdate to useEffect with dependency arrays, and componentWillUnmount to effect cleanup functions. Replace shouldComponentUpdate with React.memo and HOCs or render props with custom hooks.

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 App Router and support async/await data fetching directly without client bundle impact. Add the 'use client' directive only for components needing hooks, event handlers, or browser APIs.

No, React 19 passes ref as a regular prop, so function components can accept ref directly in their props without forwardRef. Type it as React.Ref<HTMLInputElement> or the appropriate element type.

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

Keep class components for error boundaries, since componentDidCatch has no hook equivalent. Also avoid migrating stable, working components when the team lacks hooks expertise or migration risk exceeds the benefit.