useActionStateに、それよりも後に書いた関数を渡す方法

useActionStateの関数の位置

Reactバージョン19（2024年12月安定版リリース）で導入されたuseActionStateに渡す関数は、次のようにfunctionを使った記法にすると、useActionStateよりも後（下部）に書くことができます。

import { useActionState } from "react"

const App = () => {
    const[state, getDataAction, isPending] = useActionState(getData, "")

    async function getData(prevState, formData){
        
        ...
        
    }

    return (
        <form action={getDataAction}>
            
            ...

        </form>
    )
}

export default App

functionを使った記法（＝関数宣言）には巻き上げがあるため、それよりも前に利用可能なのです。

以下、もう少し具体的に見ていきましょう。

useStateをuseActionStateで置き換える

次のようなベーシックなReactのコードを考えてみます。

「phone」や「car」といったデータを送ってダミーのJSONデータを取得するコードです。

import { useState } from "react"

const App = () => {
    const [data, setData] = useState("")
    const [result, setResult] = useState("")

    const getData = async(e) => {
        e.preventDefault()
        const response = await fetch(`https://dummyjson.com/products/search?q=${data}`)
        const jsonData = await response.json()
        setResult(jsonData)
    }

    return (
        <form onSubmit={getData}>
            <input type="text" onChange={(e) => setData(e.target.value)}/>
            <button>送信</button>
        </form>
    )
}

export default App

useActionStateを使うと、次のように書き換えられます。

import { useActionState } from "react"

const App = () => {
    const getData = async(prevState, formData) => {
        const data = formData.get("random")
        const response = await fetch(`https://dummyjson.com/products/search?q=${data}`)
        const jsonData = await response.json()
        return jsonData
    }

    const[state, getDataAction, isPending] = useActionState(getData, "")

    return (
        <form action={getDataAction}>
            <input type="text" name="random"/>
            <button>送信</button>
        </form>
    )
}

export default App

関数の記法を「const」から「function」に変える

useActionStateはgetDataの下部に書かれています。

「const...」を使った記法では、それよりも前に利用ができないからです。

しかしuseActionStateでuseStateを置き換えた経緯を考えると、useStateと同じ位置にuseActionStateを書きたいとも感じます。

その時は次のように、「const...」で始まる記法を「function」を使った記法に書き換えましょう。

// 変更前
const getData = async(prevState, formData) => {...

// 変更後
async function getData(prevState, formData){...

すると、useActionStateを次のように上部に書けます。

import { useActionState } from "react"

const App = () => {
    const[state, getDataAction, isPending] = useActionState(getData, "")

    async function getData(prevState, formData){
        const data = formData.get("random")
        const response = await fetch(`https://dummyjson.com/products/search?q=${data}`)
        const jsonData = await response.json()
        return jsonData
    }

    return (
        <form action={getDataAction}>
            <input type="text" name="random"/>
            <button>送信</button>
        </form>
    )
}

export default App

「const...」で始まる記法（＝関数式）では、それよりも前に関数を利用できません（巻き上げがないため）。

一方で「function」を使った記法（＝関数宣言）ではそれが可能なため、getDataよりも前にuseActionStateを書けます。

この記事の著者については下記リンクをチェック

◆ Amazon著者ページ：https://www.amazon.co.jp/stores/author/B099Z51QF2

公式サイト：https://monotein.com

X（Twitter）：https://twitter.com/monotein_

◆ React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。メルマガ登録はこちらから → https://monotein.com/register-newsletter