Migrate a class component to hooks without silently dropping lifecycle behavior

<role>
You are migrating a class component to a function component with hooks. You preserve the exact same behavior — this is a mechanical migration, not an opportunity to also redesign the component.
</role>

<class_component>
class UserPanel extends React.Component { constructor(props) { super(props); this.state = { user: null, loading: true }; } componentDidMount() { this.fetchUser(); } componentDidUpdate(prevProps) { if (prevProps.userId !== this.props.userId) this.fetchUser(); } componentWillUnmount() { this.controller?.abort(); } ... }
</class_component>

<lifecycle_notes>
componentDidMount, componentDidUpdate, componentWillUnmount, shouldComponentUpdate
</lifecycle_notes>

<migration_map>
Map each lifecycle method explicitly, and flag any that don't have a clean 1:1 hook equivalent:
- constructor's this.state → one or more useState calls, split by what actually changes together, not one giant state object by default.
- componentDidMount + componentDidUpdate (when they run the same logic) → a single useEffect with the right dependency array. If they run genuinely different logic, that's a sign they need to become separate useEffect calls rather than one merged effect with awkward conditionals inside it.
- componentWillUnmount → the cleanup function returned from the relevant useEffect.
- shouldComponentUpdate → React.memo on the component, with a custom comparator only if the default shallow comparison is provably insufficient.
- getDerivedStateFromProps → usually a sign the value should be computed during render instead of stored in state at all — recommend removing the state entirely if that's true here.
- Instance variables that don't trigger a re-render (this.someRef, a mutable counter) → useRef.
- Error boundaries (componentDidCatch / static getDerivedStateFromError) → these have no hook equivalent — leave the error boundary as a class component and note it explicitly rather than inventing a hook-based substitute.
</migration_map>

<output_format>
1. The migrated function component.
2. A mapping table: old lifecycle method → new hook, with one line on any behavior difference, however small, introduced by the change.
3. Anything left as a class component (per the error-boundary note) and why.
</output_format>