ReactでuseStateがうまく効かない

Question

概要

お世話になります。

現在、Next.jsでアプリケーションを開発していて、その中で要素をダブルクリックした場合にdiv要素、input要素としてトグルさせるコンポーネントを作成しています。

フレームワークにNext.jsを利用し、React.jsをTypeScript形式で記述しています。

トグルさせる手法としてReact Hookを利用していて、コンポーネントのトグル状態、およびエレメントをuseStateを利用して管理しています。

状態を管理するところまではうまく行ったのですが、トグルさせる処理がうまく行かないので、useStateの挙動等についてご教授頂きたいです。

問題点

まずはソースコードをご覧いただければと思います。

import React from 'react'
import styled, { StyledComponent } from 'styled-components'

export default () => {
    return (
        <Cell
            text='Hello World!!!'
        />
    )
}

const CellStyle: StyledComponent<'div', {}> = styled.div``

const InputStyle: StyledComponent<'input', {}> = styled.input``

interface CellInterface {
    key?: number
    text: string
}

const Cell: React.FC<CellInterface> = ({ key = 0, text }) => {
    const onDoubleClick = () => {
        if (elementState.selected) {
            setElementState({
                selected: false,
                element: <CellStyle
                            key={key}
                            onDoubleClick={onDoubleClick}
                         >
                            {text}
                         </CellStyle>
            })
        } else {
            setElementState({
                selected: true,
                element: <InputStyle
                            key={key}
                            onDoubleClick={onDoubleClick}
                            defaultValue={text}
                         />
            })
        }
    }

    type ElementState = {
        selected: boolean
        element: JSX.Element
    }

    const [elementState, setElementState] : [
        ElementState,
        React.Dispatch<React.SetStateAction<ElementState>>
    ] = React.useState<ElementState>({
        selected: false,
        element: <CellStyle
                    key={key}
                    onDoubleClick={onDoubleClick}
                 >
                    {text}
                </CellStyle>
    })

    return elementState.element
}

簡単に説明すると、Cellコンポーネント内でelementStateオブジェクトを管理していて、elementStateはコンポーネントが編集対象として選択されているかを管理するselected、表示要素であるelementを保持しています。

CellStyle、InputStyleコンポーネントのonDoubleClickイベントハンドラに関数を登録し、ダブルクリックされた場合、要素の切り替えを行えるようにしています。

上記で問題の箇所はonDoubleClickです。

僕の期待では、下記の手順を踏むことで処理が行われることを期待しています。

1. まずCellコンポーネント内部でuseStateメソッドが呼ばれ、elementState.elementはCellStyleに設定される。
2. Cellコンポーネントをダブルクリックした場合、elementState.selectedはfalseなので、elementState.selectedはtrueに設定され、elementState.elementはInputStyleに設定される。
3. 再度Cellコンポーネントをダブルクリックした場合、elementState.selectedはtrueなので、elementState.selectedはfalseに設定され、elementState.elementはCellStyleに設定される。

しかし僕の手元では上記2の部分がうまく行っていなく、CellコンポーネントをダブルクリックしてもelementState.selectedはtrueに設定されません。

console.log等でデバックしていると、上記2の部分でelementState.elementは期待通りInputStyleに設定されていますが、elementState.selectedが上手くいきません。

どなたかuseStateの挙動についてご教授頂ければと思います。

上記の説明を文字で見てもわかりづらいと思いますので、下記に再現可能なように環境情報を掲載させて頂きます。

環境情報

項目	値
OS	Windows 10
Node	v10.16.2

• 構成

$ find -type f
./package.json
./pages/index.tsx

• package.json

{
    "name": "tmp",
    "version": "1.0.0",
    "description": "",
    "scripts": {
      "dev": "next"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
      "next": "^9.0.4",
      "react": "^16.8.6",
      "react-dom": "^16.8.6",
      "styled-components": "^4.3.2",
      "styled-reset": "^3.0.0",
      "typescript": "^3.5.3"
    },
    "devDependencies": {
      "@types/next": "^8.0.6",
      "@types/react": "^16.8.23",
      "@types/react-dom": "^16.8.5",
      "@types/styled-components": "^4.1.18",
      "@zeit/next-typescript": "^1.1.1",
      "babel-plugin-styled-components": "^1.6.0",
      "ts-node": "^8.3.0"
    }
}

• pages/index.tsx

import React from 'react'
import styled, { StyledComponent } from 'styled-components'

export default () => {
    return (
        <Cell
            text='Hello World!!!'
        />
    )
}

const CellStyle: StyledComponent<'div', {}> = styled.div``

const InputStyle: StyledComponent<'input', {}> = styled.input``

interface CellInterface {
    key?: number
    text: string
}

const Cell: React.FC<CellInterface> = ({ key = 0, text }) => {
    const onDoubleClick = () => {
        if (elementState.selected) {
            setElementState({
                selected: false,
                element: <CellStyle
                            key={key}
                            onDoubleClick={onDoubleClick}
                         >
                            {text}
                         </CellStyle>
            })
        } else {
            setElementState({
                selected: true,
                element: <InputStyle
                            key={key}
                            onDoubleClick={onDoubleClick}
                            defaultValue={text}
                         />
            })
        }
    }

    type ElementState = {
        selected: boolean
        element: JSX.Element
    }

    const [elementState, setElementState] : [
        ElementState,
        React.Dispatch<React.SetStateAction<ElementState>>
    ] = React.useState<ElementState>({
        selected: false,
        element: <CellStyle
                    key={key}
                    onDoubleClick={onDoubleClick}
                 >
                    {text}
                </CellStyle>
    })

    return elementState.element
}

• 起動コマンド

$ npm run dev

Answer 1

調べてみたところ、useStateにオブジェクトを格納するのは推奨されないパターンらしいです。

リンク: 関数型の更新、useStateの設定メソッドがすぐに変更を反映しない、React の Hooks で state に Object を使う、React Hooks useState with Object

また今回の場合、ステートがオブジェクトとプリミティブで混合しているので、オブジェクトの深さが違うことから、上で挙げられたような挙動になったのかと思います。

リンクにあるようにuseReducerを利用することで、オブジェクトの変更を安定して行えるようになりました。

import React from 'react'
import styled, { StyledComponent } from 'styled-components'

export default () => {
    return (
        <Cell
            text='Hello World!!!'
        />
    )
}

const CellStyle: StyledComponent<'div', {}> = styled.div``

const InputStyle: StyledComponent<'input', {}> = styled.input``

interface CellInterface {
    key?: number
    text: string
}

const Cell: React.FC<CellInterface> = ({ key = 0, text }) => {
    interface State {
        element: JSX.Element
        selected: boolean
    }

    const reducer = (state: State, selected: boolean): State => {
        if (selected) {
            return {
                ...state,
                selected: false,
                element: <CellStyle
                    key={key}
                    onDoubleClick={() => dispatch(false)}
                >
                    {text}
                </CellStyle>
            }
        } else {
            return {
                ...state,
                selected: true,
                element: <InputStyle
                    key={key}
                    onDoubleClick={() => dispatch(true)}
                    defaultValue={text}
                />
            }
        }
    }

    const [state, dispatch] : [
        State,
        React.Dispatch<boolean>
    ] = React.useReducer(reducer, {
        selected: false,
        element: <CellStyle
            key={key}
            onDoubleClick={() => dispatch(state.selected)}
        >
            {text}
        </CellStyle>
    })

    return state.element
}

また変更対象オブジェクトのプロパティselectedと変更検知に利用されるselectedが被っているのはなんだかスッキリしません。

何を言っているのかというとuseReducerの第一引数のstate.selectedと第二引数selectedが被っているという点です。

今回はオブジェクトの更新というよりかは、要素の入れ替えなので、下記の様に書くととてもスッキリします。

useStateでプリミティブ値を扱うという本来の目的通りの使い方かと思います。

import React from 'react'
import styled, { StyledComponent } from 'styled-components'

export default () => {
    return (
        <Cell
            text='Hello World!!!'
        />
    )
}

const CellStyle: StyledComponent<'div', {}> = styled.div``

const InputStyle: StyledComponent<'input', {}> = styled.input``

interface CellInterface {
    key?: number
    text: string
}

const Cell: React.FC<CellInterface> = ({ key = 0, text }) => {
    const [selected, setSelected] : [
        boolean,
        React.Dispatch<React.SetStateAction<boolean>>
    ] = React.useState<boolean>(false)

    const element = seleted ?
            <InputStyle
                key={key}
                onDoubleClick={() => setSelected(!selected)}
                defaultValue={text}
            /> :
            <CellStyle
                key={key}
                onDoubleClick={() => setSelected(!selected)}
            >
            {text}
            </CellStyle>

    return element
}