React/TypeScriptで関数をpropsに渡すときに美しく書くための基準 #reactnative

はじめに

日々実務で、React/TypeScriptと戦っているのですが、どっちの書き方がいいんだろう?🤔と迷うことがあります。
今回は、Reactには欠かせない親コンポーネントから子コンポーネントにpropsを渡すときに生じた疑問について書きます。

React Navigationを使用して画面遷移する際の具体的なコード例を通じて、Propsの渡し方における選択肢と、それをどのように書き分けるのか、基準を紹介します。綺麗なコードを書くために使える基準だと思います。
同じ初心者エンジニアの方の参考になれば嬉しいです！

自己紹介

私は2023年9月1日にフロントエンドエンジニアとして自社開発のSaaS企業に入社しました。
未経験独学で、薬剤師からの転職です。
詳しくはこちらをご覧ください。

この記事で伝えたいこと

関数をPropsとして渡す時は、その関数になるべく引数を渡さない形で揃えると美しくなる

背景

React Nativeでスマホアプリの開発をしている
複数のコンポーネントで共通のコンポーネント（ModalComponet）を呼ぶことになった。
propsとしてmoveToに次の画面遷移先を示す関数を渡したい。
それぞれのコンポーネントで渡す画面遷移先が異なる
propsの中身をどのように書けばいいのか迷ってしまった

疑問点

なにを迷ったのか、疑問点は以下の2つです。

propsで渡す関数の中身の長さが異なる時、どこまで関数に切り出せばいいのか？
なんとなく長い、見た目が悪いという感覚で書き分けてしまったが、具体的な基準はあるのか？

以下、私がなんとなく長い、見た目が悪いかなという感覚に基づいて書いたコードです。

パターン1. アロー関数を書く

1.アロー関数を書く

<ModalComponent
  setModalData={setModalData}
  moveTo={() => navigation.navigate(pages.userSetting.name)}
/>

propsに直接コールバックを書きました。
少し長い気もしますが、一行なのでいいかなと思いました。

パターン2. 関数を切り出す

2.関数を切り出す

const moveToTop = () => {
    navigation.reset({
      index: 0,
      routes: [{ name: pages.top.name }],
    });
  };
  
<ModalComponent
  modalData={modalData}
  moveTo={moveToTop}
/>

propsに渡す関数を切り出しました。
理由はコールバックが複数行に渡るため、propsに書くと行が広がって見えにくいと思ったからです。

パターン3.関数そのものを渡す

3.関数そのものを渡す

<ModalComponent
  modalData={modalData}
  moveTo={navigation.goBack}
/>

propsに関数を直接渡しました。
navigation.goBackは、React Navigationライブラリのメソッドの1つで、現在の画面を閉じて前の画面に戻るためのメソッドです。

3パターンをなんとなくの感覚で書いてみました。
このままでも良いのですが、書き方が異なるのは気持ちが悪いし、具体的な書き分けの基準が知りたかったので先輩に聞いてみました。

ポイント

propsに関数を渡したい時、別で関数として切り出すかどうかの判断基準

関数に引数を渡すか渡さないかを１つの目安にする！!

この基準に従うと、他のpropsで変数を渡している部分の書き方と揃う(見栄えが良い)というメリットがあります。
実際に上記をリファクタしてみましょう。

リファクタ

パターン2、3は引数を渡していないのでこのままで良さそうです。
パターン1のみ修正します。

1.アロー関数を書くリファクタ

+ const moveToUserSetting = () => {
+   navigation.navigate(pages.userSetting.name);
+ };

<ModalComponent
  modalData={modalData}
- moveTo={() => navigation.navigate(pages.userSetting.name)}
+ moveTo={moveToUserSetting}
/>

引数を渡しているので、アロー関数を切り出します。
最初よりすっきりしました。
これにより、他のpropsで変数(modalData)を渡す書き方と揃って見栄えが良くなりました。

今回はpropsの数が少ないのであまりメリットを感じませんが、コンポーネントが大きくなり、propsの数が増えると、揃っていないとガタガタして見えるので、基準を持っておくことは大切だと思います。

終わりに

綺麗なコードを書くための1つの基準を教えていただきました。
ただ、あくまで基準の1つなので、他にも状況に応じて判断していく必要があります。

なんとなくで書いていたものに、具体的な基準が見つかると、一気に書きやすくなりますね。
なんとなくで書かずに、基準に基づいて書いていきたいです。