Migrating Class Components to Hooks

Instructions

All new components must be function components. When modernizing a class component, apply a predictable mapping from lifecycle methods to hooks.

Class method	Hook replacement
`constructor` + `state`	`useState` / `useReducer`
`componentDidMount`	`useEffect(() => { ... }, [])`
`componentDidUpdate(prevProps, prevState)`	`useEffect(() => { ... }, [deps])`
`componentWillUnmount`	Cleanup function returned from `useEffect`
`shouldComponentUpdate`	`React.memo` + stable props, or `useMemo`
`getDerivedStateFromProps`	Derive during render; avoid state duplication
`componentDidCatch`	`react-error-boundary` or a small class wrapper (one of the rare remaining class uses)