Add Alter The Display Name Of A Component as a react til

react/alter-the-display-name-of-a-component.md

@@ -0,0 +1,25 @@
+# Alter The Display Name Of A 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](https://github.com/facebook/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.
+
+```javascript
+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.