React - 関数コンポーネントに状態変数を持たせて、1度だけ値を初期化したい

Question

概要

React について、わからないことがあるので質問します。
Function Component に、状態変数を持たせて、コンポーネントのマウント時に初期化を行いたいのですが、どのように書けばよいでしょうか。
他の言語でいう「クラスのメンバ変数をコンストラクタで初期化する」みたいなことをしたいです。

問題

以下の例では、レンダリングに影響しない変数のため、useRef で値を定義して、new Sample() と初期化しました。
しかし、コンポーネントのレンダリングが必要となるタイミング (例えば、setSate() で state 変数を更新した場合) で const ref = useRef(new Sample()) が実行され、Sample オブジェクトのインスタンスがレンダリングのたびに作成されてしまいます。

変数 ref の値自体はリファレンス記載の通り、一番最初に初期化されたときの値が保持されているのですが、レンダリングのたびに new Sample() が実行され、Sample インスタンスが作成されてしまいます。

useRef のリファレンスの説明

initialValuecurrent: ref オブジェクトのプロパティに最初に設定する値。任意の型の値を指定できます。この引数は、最初のレンダリングの後は無視されます。

下記を実現するには、どうすればよいでしょうか

• オブジェクト型の状態変数を持たせたい
• 値の初期化はコンポーネントがマウントされた際の一度のみ (new Sample() で初期化されるのは一度のみ)

import React, { useRef, useState } from "react";

class Sample {
  constructor(date) {
    console.log(`Sample constructor called. time: ${date.toLocaleString()}`);
    this.date = date;
  }
}

function App() {
  const ref = useRef(new Sample(new Date()));
  const [state, setState] = useState(0);

  const updateState = () => {
    setState(state + 1);
    console.log(`ref.current.date: ${ref.current.date.toLocaleString()}`);
  };

  return (
    <div>
      <button onClick={updateState}>更新</button>
    </div>
  );
}

export default App;

何回か更新ボタンをクリックした場合の出力

Sample constructor called. time: 2024/1/24 17:40:55
App.js:16 ref.current.date: 2024/1/24 17:40:55
App.js:5 Sample constructor called. time: 2024/1/24 17:40:56
App.js:16 ref.current.date: 2024/1/24 17:40:55
App.js:5 Sample constructor called. time: 2024/1/24 17:40:58
App.js:16 ref.current.date: 2024/1/24 17:40:55
App.js:5 Sample constructor called. time: 2024/1/24 17:40:59
App.js:16 ref.current.date: 2024/1/24 17:40:55
App.js:5 Sample constructor called. time: 2024/1/24 17:40:59
App.js:16 ref.current.date: 2024/1/24 17:40:55
App.js:5 

Answer 1

https://tanstack.com/query/v4/docs/framework/react/guides/ssr#using-hydration

のコード例にもあるように、コンポーネントを初めてレンダリングしたときに何らかのオブジェクトを生成してそれを保持したいなら、useState の初期化関数が使えます。

import React, { useRef, useState } from "react";

// class Sample  は省略

function App() {
  const [sampleObj] = useState(() => new Sample(new Date()));
  const [state, setState] = useState(0);

 // 以下略
}

export default App;

---

質問の内容と直接は関係ないですが、本当に「初期化」にあたる処理が必要なのでしょうか？このようなことをする目的は存じ上げませんが、React ではそのようなことをせずとも画面がちゃんと組み立てられるような作りになっています。

もしそのような点でつまずいているなら、React 公式のドキュメントに目を通してみることをオススメします。

https://ja.react.dev/learn

Answer 2

useStateの初期化関数もマウント時の1回しか実行されないので、特に変更を意図しなくてもstateとすればいいのではないでしょうか？