useStateってなんじゃらホイ

Next.jsでUseStateについて、いまいちピンと来ていないため、簡単にまとめておきます。

useStateとは

・変数と関数がセットになったようなもの？
・値を保存することができる
・値が更新される度に、関数自身が呼び直される

宣言の方法

①インポートして、②宣言する

①import {useState} from 'react';

②[変数名, 関数名] = useState('');

使い方

例えば
export default function Test(){
}

という関数の中で

const [name, setName] = useState('');

というuseStateを宣言したとする。

nameに値が入っていて、
setName('セットしたい名前')
で値を更新できる。

useStateを更新するたびに、Test()が呼ばれる。

無限ループに注意する

useStateの動きを確認していたところ

Next.jsでToo many re-renders. React limits the number of renders to prevent an infinite loop.というエラーが出ました。

import * as React from 'react';
import {useState} from 'react';


export default function Test(){

    const [name, setName] = useState('');

    setName('Piro');

    return(
        <>
            <p>私の名前は{name}です</p>
        </>
    )
}

setName('Piro');
のところで、どうも無限ループに入ってしまっているようです。

setName()の前にログを仕込んでみると、
５０回ほど呼ばれたところで、エラーを出して処理を止めていました。

useStateを更新するとreturn()の中だけが更新されると勘違いしていましたが、
どうもTest()自体が呼び直されるようですね。

対策：関数の中に入れる

対策として、ボタンを押すと呼ばれる関数の中に、useStateの処理を入れました。

import * as React from 'react';
import {useState} from 'react';

export default function Test(){

    const [name, setName] = useState('Piro');   //初期値を設定

    console.log("Test()がCall");
    //setName('Piro');

    const changeName = () => {
        setName('竜騎士ガルザーグ');
    }

    return(
        <>
            <p>私の名前は{name}です</p>
            <button type="button" onClick = {changeName}>実は本名は</button>
        </>
    )
}

これで、ボタンを押した時だけchangeNameが呼ばれて、
setNameで更新するため、無限ループを防ぐことができます。

「実は本名は」のボタンを押すと・・・↓

となります。