useActionStateに、それよりも後に書いた関数を渡す方法
2025.2.7
この記事は約2分で読めます
この記事の筆者：三好アキ
🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ！Next.js/React開発入門（翔泳社／2024年）』著者。
Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2
🔹 UdemyでReact・JavaScript・Node.jsの入門動画を無料で公開中 → 無料の入門動画
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 Appfunctionを使った記法（＝関数宣言）には巻き上げがあるため、それよりも前に利用可能なのです。
以下、もう少し具体的に見ていきましょう。
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 AppuseActionStateを使うと、次のように書き換えられます。
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 Appconst...で始まる記法（＝関数式）では、それよりも前に関数を利用できません（巻き上げがないため）。
一方でfunctionを使った記法（＝関数宣言）ではそれが可能なため、getDataよりも前にuseActionStateを書けます。
メルマガ配信中
（from 三好アキ／エンジニア）
React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
（*配信はいつでも停止できます）
関連記事
