React の lazy をちょっといい感じに書きたい

名前付きエクスポートされているコンポーネントを React で 動的インポートをするには、以下のように書く必要があります。

const MyComponent = lazy(() =>
  import('./Component').then(({ MyComponent }) => ({ default: MyComponent }))
);

ただ、ちょっとかったるいというか、何やっているか分かりづらいですよね。そこで、pick というヘルパー関数を作ってみました。こんな感じで使います。

const pick = <T extends unknown>(name: keyof T) => (items: T) => ({
  default: items[name],
});
const MyComponent = lazy(() => import('./Component').then(pick('MyComponent')));

まだ行けてないなとは自分でもちょっと思いますが、さっきよりはマシになったと思います。関数にしてうまくやりたかったんですが、dynamic import 周りの制約がいろいろあるせいで結構難しかったです…