🛡️
React Hook FormのstandardSchemaResolverを使えばzod v4に対応できるよ
今年の2月にReact Hook FormはStandard Schemaに対応しました。
Standard Schemaの導入により、React Hook Formは特定のバリデーションライブラリに依存せず、標準化されたインターフェースを通して柔軟に連携できるようになりました。
zod v4がReact Hook Formで動かない問題
React Hook Formとzodを組み合わせて使う際には、zodResolverを使うのが一般的ですが、残念ながらこのzodResolverはまだzod v4に対応していません。
例えば、次のようなコードを書くと、以下のような型エラーが発生します。
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod/v4'; // zod@^3.25.0
const formSchema = z.object({
name: z.string(),
});
export function Form() {
const {register} = useForm({
resolver: zodResolver(formSchema),
defaultValues: {
name: '',
},
});
return <input {...register('name')} />;
}
解決策：standardSchemaResolver を使おう
このようなzod v4との互換性の問題に対しては、standardSchemaResolverを使用することで解決できます。
import { standardSchemaResolver } from '@hookform/resolvers/standard-schema';
import { useForm } from 'react-hook-form';
import { z } from 'zod/v4';
const formSchema = z.object({
name: z.string(),
});
export function Form() {
const { register } = useForm({
resolver: standardSchemaResolver(formSchema),
defaultValues: {
name: '',
},
});
return <input {...register('name')} />;
}
standardSchemaResolverはStandard Schemaを準拠しており、zodの内部実装に依存しないため、zod v4におけるような破壊的変更の影響を受けません（zodがStandard Schemaのサポートを辞めた時には影響を受けますが）。そのため、React Hook Form側の対応を待たずにzod v4に移行を始めることができます。
おわり
TSKaigiでStandard Schemaの紹介スライドがありましたが、ライブラリの破壊的変更にも強くなるよ、ということが言いたくて書きました。
Standard Schemaについてわかりやすく解説されているのでまだ見てない方はぜひご覧ください↓
Discussion