`displayName` from memoized components should be taken into account in DevTools

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')

1. Provide it with a displayName

FancyMemoComponent.displayName = 'FancyMemoComponent'

1. 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]

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

[Scalahansolo]

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