React Hooks state 配列に追加できない

Question

お世話になります。
初めて投稿いたします。
Reactは初心者になります。

ここですでに類似したケースをいくつか拝見いたしましたが
依然として解決出来ていません。
(理解できていないため活用出来ていない為かと)

stateでない配列は問題なく処理出来ているんですが、
何故か以下pathPush呼び出してもstateのpathCoordsは
配列要素追加できません。
数か月格闘していますが他の試行含め更新されるのを一度も見ていません。

（※）の書式が怪しいのでご教授お願い致します。
抜粋ですが
よろしくお願い致します。
(react 17.0.2)

const [pathCoords, setpathCoords] = useState([
{
lat: 35.6809591, //①
lng: 139.7673068 //①
}
]);

const pathPush = () => {

const lat1 = (任意数字②);
const lng1 = (任意数字②);

let pathTmp = [];

pathTmp.push({lat:lat1,lng:lng1});
//alert(JSON.stringify(pathTmp[0])); //値②が確認できました


setpathCoords([...pathCoords, pathTmp]); 
//（※）書式は見様見真似です


alert(pathCoords.length); //値が１のまま
alert(JSON.stringift(pathCoords[0])); //①が確認できます
alert(JSON.stringify(pathCoords[1])); //当然確認できません

}

Answer 1

useStateの戻り値二番目の関数は実行後に即座にはステートの値を変更しません
一連の処理が終わった後に行う変更の予約をしてる感じです

その場その場でいちいちステートの値を変更してると
都度何度も再レンダリングをすることになってしまいますからね

もし、その配列の変更それ自体ではなく
その配列を利用して生成された値によってこそステートを更新したいという場合は
useRefを使うと良いかと思います

あと

console.log([...pathCoords, pathTmp]);

してみて意図通りの形なの確認してみましょう
多分意図通りではない気がします

console.log([...pathCoords, ...pathTmp]);

ではないでしょうか

Comments

[bbTeratail]

ご回答ありがとうございます。
嬉しいです。
で、
stateの挙動自体まだまだあやふやで、ご指摘の動きも初耳でした・・・
以後、精進して勉強します。
useRefも今確認中です。
ご指摘のコンソールログの書式はこちらも初耳でした。
確かに出力しません。
とりあえず引き続き調べてみます。
一旦、ありがとうございます。