React - Getting "Component definition is missing display name" error when using React.memo

Question

Why am I getting the ESLint error Component definition is missing display name on this code:

export const Button = React.memo(props => {
//...
});

Is this a false positive or real error?

Answer 1

Exporting an arrow function directly doesn't give the component a displayName, but if you export a regular function the function name will be used as displayName.

You can also put the function in a variable, set the displayName on the function manually, and then export it.

const Button = React.memo(props => {
//...
});

Button.displayName = 'Button';
export Button;