React Hooks早わかり(useState編)

useState概要

ステートを管理するhooks
公式リファレンス
https://ja.reactjs.org/docs/hooks-reference.html#usestate

基本形

import { VFC, useState } from "react";

type Todo = {
  text: string;
};

const UseStateSample: VFC = () => {
    // number
    const [count, setCount] = useState(0);
    // string
    const [text, setText] = useState("");
    // object[]
    const [todos, setTodos] = useState<Todo[]>([{ text: "Learn hooks" }]);	
}

Stateの更新

// number
<button onClick={() => setCount((prevCount) => prevCount + 1)}>click</button>
// object[]
<button onClick={() => { setTodos([...todos, { text: todo }])}}>add Todo</button>

Stateの更新(オブジェクトのリスト)

useStateの更新判定は値の同一性（Object.is()）で比較される。
そのため、オブジェクトのプロパティの値をただ更新するだけでは変更は検知できない。
⇔オブジェクトをコピーした上で、変更をマージする必要がある。

※サンプルコード

import { VFC, useState } from "react";

type Member = {
  　　id: number;
  　　name: string;
  　　age: number;
　　　　checked: boolean;
};

const UseStateSample: VFC<Member[]> = () => {
　　　　const [members, setMembers] = useState<Member[]>([]);
　　　　const update = (id: number) => {
      　　setMembers([
        　　　　...members.map((member) => (member.id === id ? update(member) : member)),
　　      ])
    }

  　　return (
　　　　　　　　// return jsx
　　　　)
};

全体のサンプルコードは下記リンクを参照ください。
https://github.com/w8f/react-training/commit/74bf3d5d904ece40d3a63fb8318005def94f36c9