`babel-plugin-react-anonymous-display-name`

Motivation

Babel plugin that fixes displaying, in react devtools, components wrapped by React.memo and forwardRef as Anonymous.

Install

Using npm:

``sh npm install --save-dev babel-plugin-react-anonymous-display-name`

or using yarn:

`sh yarn add babel-plugin-react-anonymous-display-name --dev`

`How does this work?`

If you also prefer using arrow functions the only way to get proper component names in react devtools right now is:

`js // doesn't work :( export const Memo = React.memo(() =>

);
Memo.displayName = 'Memo';
// works
const MyComponent = React.memo(function MyComponent(props) {
  return

;
});
// works too
const MemoComponent = () =>

;
export const Memo = React.memo(MemoComponent);


But it leads to the unnecessary code and in bigger projects I can be an issue. This plugin fixes the issue by transforming anonymous arrow function into named function with name taken from the variable

`js const Memo = React.memo(() =>

);


into:

`js const Memo = React.memo(function Memo() { return

;
});

$3

As you don't have to set displayName manually anymore, here is Eslint plugin that will help you to find places where you defined displayName on memo()` components:

- eslint-plugin-no-memo-displayname

$3

MIT