displayName from memoized components should be taken into account in DevTools

[wild-lotus]

If you create a component via React.memo and then explicitly provide it with a displayName, DevTools ignore this display name.

React version: 16.12.0
DevTools version: 4.4.0

Steps To Reproduce

1. Create a component like:

const FancyMemoComponent = React.memo(() => 'Check my name in DevTools')

2. Provide it with a displayName

FancyMemoComponent.displayName = 'FancyMemoComponent'

3. Check its name in DevTools.

Link to code example: https://codesandbox.io/s/react-memo-display-name-vk7gv

The current behavior

DevTools do not display the given displayName.

The expected behavior

DevTools should display the given displayName.

Comments

I am aware that the name can be picked from the function inside React.memo, but I prefer using anonymous functions.

I am using this workaround:

FancyMemoComponent.type.displayName = 'FancyMemoComponent'

[moonrailgun]

Same problem in #17876

They dont recommand modify type . And its not support in typescript
I am try to persuade offical to think about it and have not reply yet

[moonrailgun]

I have a alternative solution to fix it by myself when React have not fix it

import React, { PropsWithChildren, SFC } from 'react';

export const MyMemo = <P extends object>(
  Component: SFC<P>,
  propsAreEqual?: (
    prevProps: Readonly<PropsWithChildren<P>>,
    nextProps: Readonly<PropsWithChildren<P>>
  ) => boolean
) => {
  const memoized = React.memo(Component, propsAreEqual);

  Object.defineProperty(memoized, 'displayName', {
    set(v) {
      Component.displayName = v;
    },
  });

  return memoized;
};

Its easy to replace and not change any api

[drager]

Would be great if the displayName become something like: Memo(ComponentName). At the moment memoized components will be displayed as _c2, _c3, etc in Chrome devtools when profiling which is somewhat cumbersome.

[idmadj]

#18495 will fix this.

[vasilii-kovalev]

I can see that when using React.memo, why-did-you-render library displays the component's name as undefined.

const SignInForm: React.FC = React.memo(() => {
  ...
});

Does #18495 fix this?

[eps1lon]

This issue is fixed in the latest release candidate for React 17. You can try it out with by installing react@next and react-dom@next. I created a codesandbox using displayName on React.memo to showcase the fix.

[lishoulong]

This issue is fixed in the latest release candidate for React 17. You can try it out with by installing react@next and react-dom@next. I created a codesandbox using displayName on React.memo to showcase the fix.

Hi, This bug is not fixed in your codesandbox.

[KingMatrix1989]

Not working

[Scalahansolo]

This is still an issue as outlined by the linked sandbox. Not solved.

[easyTree]

This issue is fixed in the latest release candidate for React 17. You can try it out with by installing react@next and react-dom@next. I created a codesandbox using displayName on React.memo to showcase the fix.

The App memo shows as "_c [Memo]" ([] are my attempt to simulate a block with background-color set)