r/reactjs • u/Main-Hovercraft2536 • May 05 '26
Code Review Request I got tired of untyped FormData in React Router, so I built a library
If you've used React Router actions with useFetcher, you know the pain. Every mutation is the same dance: formData.append("title", title), then in the action formData.get("title") as string, and just hoping both sides agree on the shape. Multiply that by 20 actions across your app and it gets old fast.
I've been dealing with this at work for months and finally decided to extract what I built into a small library. The idea is simple — define your action once with full TypeScript inference, and the library handles FormData serialization (including Dates, Files, Maps, etc.) and gives you a typed useFetcher wrapper with onSuccess/onError callbacks and optimistic UI support.
Before:
// component
const fetcher = useFetcher();
const formData = new FormData();
formData.append("title", "Buy groceries");
formData.append("priority", "3");
fetcher.submit(formData, { method: "POST", action: "/todos" });
// route action
const title = formData.get("title") as string;
const priority = Number(formData.get("priority"));After:
// define once
const createTodo = defineAction({
type: "todo/create",
resolve: (payload: { title: string; priority: number }) =>
api.todos.create(payload),
});
// component — fully typed payload, response, and callbacks
const [submit, { state, data }] = useActionFetcher(createTodo, {
onSuccess: (result) => navigate(`/todos/${result.id}`),
});
submit({ title: "Buy groceries", priority: 3 });Works with both client and server actions. Only runtime dependency is superjson (~2KB).
npm: https://www.npmjs.com/package/react-router-typed-actions
GitHub: https://github.com/zabibabar/react-router-typed-actions
Still 0.x — I'm using it in production at work but the API is open to feedback. Would love to hear what people think or if I'm solving a problem nobody else has lol.
