JavaScriptで渡した関数内の値が渡した時点で固定される事象の解消について

Question

前提

SpringBootのサンプルを見ながら、
フロント側のWebSocket機能のサンプルをReactで書き換えてみています。

実現したいこと

stomp.jsのライブラリに関数を渡した時、関数内部で使用している値が固定される事象の解決をしたいです。

該当のソースコード

const WebSocketSample = () => {
  const [stompClient, setStompClient] = useState<Stomp.Client>();
  const [greetings, setGreetings] = useState<string[]>([]);
  const [name, setName] = useState<string>('');
  const [connected, setConnected] = useState<boolean>(false);

  const connect = () => {
    const socket = new SockJS('/gs-guide-websocket');
    const client = Stomp.over(socket);
    client.connect({}, (frame: any) => {
      console.log(frame);
      client.subscribe('/topic/greetings', (greeting) => {
        showGreeting(JSON.parse(greeting.body).content);
      });
    });
    setStompClient(client);
    setConnected(true);
  };

  const showGreeting = (message: string) => {
    console.log(greetings);              // ① [] で固定されている
    const tmp = greetings.slice();
    tmp.push(message);
    setGreetings(tmp);
  };

  const sendName = () => {
    console.log(greetings);  // ② [Hello, Taro!] 本来sendするごとに要素は増えていってほしいが①で固定されているため常に1要素しかない
    stompClient?.send('/app/hello', {}, JSON.stringify({ name }));
  };

  const handleName = (event: React.ChangeEvent<HTMLInputElement>) => {
    setName(event.target.value);
  };

  // return <>.....</>

1. connectを呼び出す
2. sendNameで/app/helloを呼び出す -> サーバから/topic/greetingsにMESSAGEが送られる。
3. 送られたメッセージを購読し、showGreetingでstateに追加格納する。

流れとしては上記のことをしたいのですが、ソース内①,②のとおりshowGreeting内で使用しているgreetingsが初期値で固定されてしまうため順次追加していくということができません。

おそらくsubscribe時に渡した情報が残っているのだと考えているのですが、解決方法を教えていただけますと幸いです。

補足情報（FW/ツールのバージョンなど）

react: 18.2.0
sockjs-client: 1.6.1
stompjs: 2.3.3

Answer 1

関数型の更新

新しい state が前の state に基づいて計算される場合は、setState に関数を渡すことができます。この関数は前回の state の値を受け取り、更新された値を返します。以下は、setState の両方の形式を用いたカウンタコンポーネントの例です。
フック API リファレンス

リファレンスには上記の記載がありました。

Reactを使用したことがないので憶測で申し訳ないですがshowGreeting関数を以下のようにしてみてはいかがでしょうか。
（tsは不安なのでjsで記載します。型アノテーションは適宜補完してください）

const showGreeting = message => {
    setGreetings(greetings => {
        console.log(greetings);
        const tmp = greetings.slice();
        tmp.push(message);
        return temp;
    });
};

Comments

[1k6]

いただいた回答で解決することができました。
関数を渡すことができるのを失念しており、
確か教えていただいた書き方でないとstateは画面レンダリング開始前の値で固定されるはずでしたので、その影響だったのかもしれません。
おかげさまで関数を使用することでレンダリング中でも情報が参照できることがわかりました。

ご対応いただきありがとうございました。