React phantom remounts

[jasonLaster]

Recently a user encountered a bug with a react phantom remount

FWIW my bug had to do with a phantom remount. Someone was declaring a functional component in a render function, it's identity would change when that component re-rendered and would cause that sub-tree to remount. Phantom remount is a common footgun for React. I ended up debugging this one manually with the following and moving it up my React tree until I found the culprit.

React.useEffect(() => {
    return () => {
      console.trace('ListGroupMembers remounts');
    };
  }, []);

[jasonLaster]

cc @bvaughn

Unfortunately it is one of the more common footguns. This is something I've thought about the React DevTools trying to help with in the past. I think maybe if it were to pay the cost of loading source maps then it could do this by confirming the component's definition was within a parent/owner component, and was not also wrapped in a useMemo (or other memoization).

Seems more feasible for Replay to do this wrt the cost of loading and parsing the source map. (Not sure how rough it would be to add framework specific logic though.)