Alter The Display Name Of A React Component

Components adopt their display name from the class or function that renders them. A component's display name becomes important to know about as soon as you start digging through the React devtools interface -- whether debugging or just perusing the component hierarchy, the display names of components is what you'll see. In most circumstances, the display name is good enough as is. If you want or need to, you can change it.

const Hello = ({ name }) => {
  return (
    <h1>{name}</h1>
  );
};
Hello.displayName = "Hola";

By setting the displayName property on this component, you are able to alter what name is used by React devtools.

This can be useful when bringing in a 3rd party library or component that doesn't use a display name that you find helpful -- in particular when using Higher Order Components.