Add comparison to other liberaries such as react-hook-form

[villesau]

Hi,

Would be cool to see a small comparison to the most popular form libraries out there. Seems that react-zorm shares quite a bunch of similarities with react-hook-form, but it is not fully clear what are the differences for example.

[esamattis]

I really don't like comparisons because they are inherently biased, especially when written by one of the authors 😉 I tried to put the most important points as bullets points at the beginning of the readme.

But here's few thoughts.

I have used react-hook-form only briefly but I think the biggest feature Zorm has that's not in it is the type-safe name/id attribute generation. Even if you use the official Zod resolver; it seems that nothing prevents you from making typos in the input name-attributes. UPDATE: I was wrong about this 😅 See the next comment.

Example:

const schema = z.object({
  name: z.string().nonempty({ message: "Required" }),
  age: z.number().min(10)
});

// ....

<input {...register("nameTYPO")} />
// No type error 🤷‍♂️

In Zorm you'll get the red squiggly line if you do this mistake:

At least I did not find a way to make this type-safe in React Hook Form. There's quite a lot documentation to go through.

And that comes to the another point of Zorm: Simplicity and scope. I don't plan to extend Zorm too much beyond what it is now. For example I have no plans to add watcher support like in React Hook Form (I think an external tool can be used for that if needed, or even just controlled components). I'll probably put it to 1.0 once we get some production usage out of it at my workplace. React Hook Form has a quite a few hooks and methods returned from them which takes some time to your head around. In contrast you can go through the Zorm readme in few minutes.

That being said I think React Hook Form is a really good library and definitely can handle some more complex use cases better.

[villesau]

I like comparisons. I would imagine that no-one expects authors to have fully unbiased comparisons. The reason why I go to see comparisons is to see how the authors see the strengths and weaknesses of their libraries. It gives a nice quick overview to determine wether the library might suit your needs better than some other library.

What comes to the example, it actually is possible to make the names type safe:

type FormValues = {
  name: string;
};
const { register } = useForm<FormValues>(); // <- generics enforces the types
<input
  {...register("name_THIS_ACTUALLY_FAILS_THE_TYPE_CHECK")}
/>
<input
  {...register("name")} // succeeds
/>

Btw, thanks for the explanation!

[esamattis]

Ah, thanks for correcting me! A prime example why (I) should not do the comparisons 😅

Here's a corrected Codesandbox for anyone wondering how to do it with Zod in React Hook Form
https://codesandbox.io/s/react-hook-from-zod-l137z?file=/src/App.tsx

But I guess there's one point of Zorm: It is a Typescript-first library. Everything is typed by default and one must jump hoops to be unsafe.

[esamattis]

Moved this to a discussion.

Btw, if somebody wants to help with comparisons I think it would be insightful to a convert this todo example to type-safe idiomatic React Hook Form version. At least I would find it very interesting because it would show differences how nested fields are typed where I think Zorm shines. But I won't do for obvious reasons 😂

[esamattis]

For example I have no plans to add watcher support

Just kidding 😅 Came up with a simple way to implement useValue() hook https://github.com/esamattis/react-zorm#using-input-values-during-rendering