React NativeのState（状態）とは？初期化からsetStateまでを実例付きで解説

State（状態）とは、アプリ内で扱うデータの出所となる場所であり、React Nativeアプリ開発において最も重要な概念の一つです。開発時には、stateをできるだけシンプルに保ち、状態を持つコンポーネント（ステートフルコンポーネント）の数を最小限に抑えることが推奨されます。

例えば、10個のコンポーネントがstateのデータを必要としている場合、各コンポーネントごとにstateを持たせるのではなく、すべてのデータを管理する1つのコンテナコンポーネントを作成し、そこでstateを一元管理するのが理想的な設計とされています。

例1：ボタンを押すとタイトルがON/OFFに切り替わる

stateは、以下のようにコンストラクタ内で初期化します。

constructor(props) {
    super(props);
    this.state = { isToggle: true };
}

ここでは、isToggleという真偽値（boolean）をstateに設定しています。ボタンのタイトルはこのisToggleプロパティの値によって決まり、trueであれば「ON」、falseであれば「OFF」と表示されます。

ボタンが押されるとonPressメソッドが呼び出され、その内部でsetStateが実行され、isToggleの値が更新されます。

onPress={() => {
    this.setState({ isToggle: !this.state.isToggle });
}}

ユーザーがボタンをクリックするとonPressイベントが発火し、setStateによってisToggleプロパティのstateが反転します。これにより、ボタンの表示がONとOFFの間で交互に切り替わる仕組みです。

App.js

import React, { Component } from "react";
import { Text, View, Button, Alert } from 'react-native';

class App extends Component {

    constructor(props) {
        super(props);
        this.state = { isToggle: true };
    }

    render(props) {
        return (
            <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
                <Button
                    onPress={() => {
                        this.setState({ isToggle: !this.state.isToggle });
                    }}
                    title={
                        this.state.isToggle ? 'ON' : "OFF"
                    }
                    color="green"
                />
            </View>
        );
    }
}
export default App;

出力結果

ユーザーがボタンを押すたびに、ボタンの表示がONとOFFの間で切り替わります。

例2：テキストをクリックすると表示が変わる

次の例では、stateを以下のようにコンストラクタ内で初期化しています。

constructor(props) {
    super(props);
    this.state = { myState: 'Welcome to Tutorialspoint' };
}

このmyStateは、Textコンポーネントの中で以下のように表示されます。

<Text onPress={this.changeState} style={{color:'red', fontSize:25}}>{this.state.myState}</Text>

ユーザーがテキストをタップまたは押下するとonPressイベントが発火し、this.changeStateメソッドが呼び出されます。このメソッドは、setStateでmyStateを更新することにより、画面に表示されるテキストを書き換えます。

changeState = () => this.setState({myState: 'Hello World'})

App.js

import React, { Component } from "react";
import { Text, View, Button, Alert } from 'react-native';

class App extends Component {

    constructor(props) {
        super(props);
        this.state = { myState: 'Welcome to Tutorialspoint' };
    }
    changeState = () => this.setState({myState: 'Hello World'})
    render(props) {
        return (
            <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
                <View>
                    <Text onPress={this.changeState} style={{color:'red', fontSize:25}}>
                        {this.state.myState}
                    </Text>
                </View>
            </View>
        );
    }
}
export default App;

出力結果

補足：関数コンポーネントとuseStateフックによる現代的な書き方

現在のReact Native開発では、クラスコンポーネントよりも関数コンポーネントとuseStateフックを使用するのが主流となっています。例1のコードは、以下のように簡潔に書き換えられます。

import React, { useState } from "react";
import { View, Button } from 'react-native';

const App = () => {
    const [isToggle, setIsToggle] = useState(true);
    return (
        <View style={{ flex: 1, justifyContent: 'center', margin: 15 }}>
            <Button
                onPress={() => setIsToggle(!isToggle)}
                title={isToggle ? 'ON' : 'OFF'}
                color="green"
            />
        </View>
    );
};

export default App;

useStateは、現在のstateの値と、それを更新するための関数をペアで返すフックです。クラスコンポーネントのようなconstructorやthisのバインディングが不要になるため、コードが大幅に読みやすく、保守しやすくなります。