0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

useStateってなんじゃらホイ

Posted at

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()の前にログを仕込んでみると、
50回ほど呼ばれたところで、エラーを出して処理を止めていました。

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で更新するため、無限ループを防ぐことができます。

スクリーンショット 2021-12-06 13.56.26.png

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

スクリーンショット 2021-12-06 13.57.18.png

となります。

0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?