Countermeasure for React component name written in TypeScript to be Unknown

---

Problem

With the React Developer Tools, you can check the components, but if you implement the component with TypeScript you may get .

In the following cases, and are supposed to be displayed originally but is displayed instead of .

File

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Foo } from "./components/Foo";
import { Bar } from "./components/Bar";
ReactDOM.render(
  <div>
    <Foo />
    <Bar />
  </div>,
  document.getElementById("root")
);

components/Foo.tsx

import * as React from "react";
const Foo = () => {
  return (
    <div>
      <p>foo</p>
    </div>
  );
};
export { Foo };

components/Bar.tsx

import * as React from "react";
export const Bar = () => {
  return (
    <div>
      <p>bar</p>
    </div>
  );
};

Measures

It does not export directly as follows, it assigns to the variable once with const and exports it. The sample repository is here.

If you export directly, the component name will be in React Developer Tools. If you set displayName like App.displayName = "App", even if you export directly, the component name will be entered.

NG

components/Bar.tsx

import * as React from "react";
export const Bar = () => {
  return (
    <div>
      <p>bar</p>
    </div>
  );
};

OK

components/Bar.tsx

import * as React from "react";
const Bar = () => {
  return (
    <div>
      <p>bar</p>
    </div>
  );
};
export { Bar };

Version

React Developer Tools 2.5.2