Bug: Anonymous component name in developer tool with run build but not run start

[anaskiee]

Components name are not displayed in developer tool in production environment (during tests). But they are in the local one launched with npm run start.

I configured webpack to to have almost the same behavior between two environments but I did not succeed to have the expected behavior.
It seems linked to the displayName property which is not set under "type".

production env

local env

React version: 17.0.1

Steps To Reproduce

You can reproduce the bug by using React.memo on an anonymous function and then set displayName on the output.

Example:

export default App = React.memo(() => {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
});
App.displayName = "App";

Actually, the bug is probably that the displayName is not taken into account on memo by the react devtool. But since the object is not generated the same way in both environments, I'm not quite sure.

[bvaughn]

This seems related to PR #20659 (what's being proposed if not the exact mechanism of the fix at least).

React gets the component's name using either componentFunction.name or componentFunction.displayName. Anonymous functions (like () => {...}) have neither unless you explicitly specify a displayName.

In the code above, you're adding a displayName to the memo wrapper, rather than the function inside. DevTools is reading the name from the function inside which is anonymous.

The fix for that would be to name the inner function:

const App = () => {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
};

// This is redundant in DEV builds but in production builds, component names are typically mangled and minified.
// Note that adding this increases the size of your JS bundle so it might not be worth doing!
App.displayName = "App";

const MemoizedApp = memo(App);

Ideally DevTools could just read this name from the source maps (if they were available) but that adds cost of loading and parsing the sourcemaps.

[anaskiee]

Thanks for your answer.

Indeed, I was not putting the displayName on the right object. I should directly use named function instead of anonymous one and then set the displayName afterward.

It does not explain the behavior difference (local vs build) but maybe I missed something in the webpack configuration.

This issue can be closed.

[bvaughn]

Gotcha 👍

Thanks~