useStateの値を関数に渡すべきか？

Question

実現したいこと

Next.js(React)について質問です。
useStateで管理している値を関数内で使用する場合、引数に渡すのと渡さないのはどちらがいいのでしょうか。
理由を交えて教えていただけると幸いです。

発生している問題・分からないこと

useStateの値を関数に渡すべきかの判断がわからない。

該当のソースコード

import { useState } from 'react';
import { format } from 'date-fns';

export default function Page() {
  const [date, setDate] = useState<Date>(new Date());

  //ここで引数にdate渡すべきか否か。
  //あくまでも例です。
  const stringConversion = () => {
    const formattedDate = format(date, 'yyyy-MM-dd');
    return formattedDate;
  };

  return (
    <div>
      <p>{stringConversion()}</p>
    </div>
  );
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

インターネットで調べたが腑に落ちる情報がない。

補足

特になし

Comments

[miyabi_pudding]

一点ご質問があります。
date変数を、setDateにて変更する挙動はさせますか？
（ソースコードは例かと思いますが、useStateを使用する意味が見られないような構文になっているため）

[Fukunotori123]

すみません、確かに意味がないコードにはなっています。
ただ、useStateのここでいうdateを関数に渡しても渡さなくても同じように動作すると思うのでどちらで対応するのがコードの書き方として正しいかを知りたいという意図がありました。
今回そのためのコード例をその場で記載しているため意味のないものになってしまいました。
ですので、コード自体には深い意図はありません。

[miyabi_pudding]

わかりました。
なるたけ納得感ある回答目指して、回答していこうと思います。

[Fukunotori123]

ありがとうございます！
お手数をおかけしますがお願いします。

[maisumakun]

stringConversionを関数にした意図はどのようなものでしょうか？

（コード整理なのか、複数個所で使う前提なのか、子要素まで引き回すのかなど）

Answer 1

BAに対立するような回答を書いちゃいますが、状態によって戻り値が変わるような関数はテスタブルじゃないので望ましくありません。
関数内で状態を利用したい場合でも、useCallbackを使うなりして依存対象の状態を明確にすべきです。

Answer 2

まず、大前提にあるのは、要件によるということです。
要件によっては、質問にありますとおり、引数として渡す必要が出てくる場合もありますし、
質問ソースコードにある通り、関数内で直接使用した方がいい場合もあるでしょう。

ただし、一つ大事な点としては、
引数にするということは、関数内スコープになるということです。
つまりは、引数で渡す場合は、
コンポーネントルートスコープのdate変数を保持した上で、別名引数による関数内スコープでの変数、dateInnerなどとするでは別処理を行いたい、といったことを可能にできます。
（つまりは、引数で渡した際に、引数には別値を代入したい、や、その上で、setDateでルートの変数に再セットして、別関数で更新された値を使いたい、など）

なので、上記のように、テクニカルなことをせねばならない、と言った時に、引数にするといいのかもしれません。
それ以外では、あまり引数にする必要性を感じる要件は私には浮かびません。