Use lifecycle hook

I need this component to run code after it first renders and whenever its userId prop changes. Call the provided loadProfile function on mount and whenever userId changes, cancel any in-flight load when userId changes again, and ensure cleanup on unmount so no callbacks run afterwards.

Before I push this hook usage, make it easy to review: show the effect dependencies clearly, extract the async load into a named function, document why each dependency is present, and flag any non-serializable values that shouldn't be in the dependency array or will cause spurious runs.

We regularly write effects that either run too often because we include unstable values or they miss updates because we leave out deps. Review cycles are long and bugs slip in. Which single practice should the team adopt to reduce these mistakes and how do I enforce it in code reviews and one linters rule to add?