Automatically add displayName properties to your React project.
npm install babel-plugin-react-anonymous-display-namebabel-plugin-react-anonymous-display-nameBabel plugin that fixes displaying, in react devtools, components wrapped by React.memo and forwardRef as Anonymous.
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
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 = () =>
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
MIT