Reactのレビューの練習①

Reactを業務で使うようになって○ヶ月、まだ自分がレビューする機会が無いので、ここでレビューの練習をしてみたいと思います。

前提

• Typescriptで書いている
• buildツールはesbuild

お題

実際にプロダクト内で見かけたコードを簡素にしたものです。

import React from 'react';
import { useLangContext } from 'react-i18next';

type nameProps = {
  name: string;
}

export default function MyComponent(props: nameProps) {
  const { i18nTextTable: T } = useLangContext();

  return (
    <div>
      {T('hello')}, {props.name}!
    </div>
  );
}

レビュー

気になる点①：型の命名規約

type namePropsとしていますが、Typescriptでは、型の命名にはPascalCaseを使うことが一般的です。 type NamePropsの方が適切だと思います。

気になる点②：default exportの利用

esbuildの公式ドキュメントを確認すると、 https://esbuild.github.io/content-types/#default-interop

デフォルトエクスポートは解釈方法が複数あり、間違った解釈から、予期しないエラーが引き起こされることがあるようです。
また、デフォルトエクスポートは呼び出し側で自由に名前を変更できるため、名前の一貫性が保証されません。特別な理由がない限り、名前付きエクスポートを使用した方がいいのではないでしょうか？

気になる点③：propsの分割代入

export default function MyComponent(props: NameProps) {

これだと、コンポーネントに予期しないpropsが渡されるリスクがあり、最悪コンポーネントが壊れてしまいます。

export default function MyComponent({name}: NameProps) {

このように、分割代入を利用すれば、この一行は長くなってしまいますが、プロパティを明示して利用でき、 使う時に{props.name}ではなく、{name}として使うことができます。

気になる点④：翻訳関数の命名

  const { i18nTextTable: T } = useLangContext();

ここでTは略称でしょうか。そうであるならば、別の略称を使った方が良いと思われます。TypescriptでTは型引数のことなので、混同する可能性があるからです。 translateやtextなどを使う方がi18nを使用してることを明示できるかもしれません。