最後のReact教材。Reactはこれだけやれば完了です【2025年6月発売／React 19対応／React初級〜中級者向け】くわしくはコチラ

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

pen-icon 2025.2.7

この記事は約2分で読めます

🟢 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
🟢『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ！Next.js/React開発入門（翔泳社／*韓国でも出版）』著者。

▼ Amazon著者ページはこちら
amazon.co.jp/stores/author/B099Z51QF2

最初にお知らせです。

【最後のReact教材】をリリースしました。

▼ 購入はこちらから

👉 monotein.base.shop/p/00005（Baseショップ）

👉 monotein.booth.pm/items/5611184（Boothショップ）

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