## Component definition error：display-name

(╯▔皿▔)╯ 需要 bug context XDD
## 問題
這是一個簡單的 functional component，裡的 Code 會跳以下 Error
:::danger
Component definition is missing display nameeslintreact/display-name
:::

import React, { memo } from 'react';

const MemoComponent = memo(() => <span>My Component</span>);

## 解法
### 解法一

import React, { memo } from 'react';

const Component = () => <span>My Component</span>;
const MemoComponent = memo(Component);

### 解法二
定義一個 displayName 給他，並取名為相同名字。

import React, { memo } from 'react';

const MemoComponent = () => <span>My Component</span>;

MemoComponent.displayName = 'MemoComponent';
export default memo(MemoComponent);

### ~~推測解法（TODO 待驗證）~~ 不能用

import React, { memo } from 'react';

const App = () => <span>My Component</span>

const MemoComponent = memo(() => <App/>);

- 推測會變成一個叫做 App 的 component
- 但沒有。

### 問題原因
- 推測是 eslint 需要 display name

## 補充
### display name 是什麼
- display name 是 component 的名稱
- 可以透過修改 display name 重新命名 component 名字， debug 很好用

### 相關資料
- [MDN - Function.displayName](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/displayName)（瀏覽器兼容性極差）
- [displayname React.Component – React](https://reactjs.org/docs/react-component.html#displayname)