Manage component state

I need to wire a component so its UI stays in sync with user input and an async load. Update the component state when the text input changes and when the fetch returns; prevent state updates after the component unmounts. After wiring, verify that typing reflects immediately and that the loaded data replaces the placeholder without causing errors.

Before I commit this component, make the state handling easier for a reviewer: surface where local state lives, show which fields are derived vs source-of-truth, highlight any direct DOM reads or shared-mutable objects that could confuse updates, and flag code paths that might set state after unmount.

I just saw a warning that state was updated after the component unmounted. The component fetches profile data on mount and binds onChange for an input; Alice on QA left the page fast. I don't know whether the fetch or the input callback caused it, and I can't reproduce reliably. What is the most likely cause and the smallest change to reliably stop the warning while preserving behavior?

Across several features we keep getting state-update-after-unmount warnings and duplicated state for the same entity in parent and child components. Each fix is ad hoc and we regress. Help me pick one habit to change that reduces these bugs and speeds reviews. Explain the habit and a concrete first PR-size change I can make.