3 great Typescript libraries to speed up your full stack development
Tags: typescript, fullstack, webdev, programming
Published: 2023-10-13 10:22:26

I have been hard at work turning my [Instagram clone project](https://www.linkedin.com/feed/update/urn:li:activity:7104512314267095042/) from a front-end mock to a full stack application. It’s still a ways off but I wanted to share new libraries I picked up: 

- React Hook Form
- Zod
- Prisma

They’re very popular and I must say their popularity is well deserved. They provide amazing developer experience and type-safety, which reduces my mental overhead and enforces good code structure. I will always have these libraries in my tech stack from now on until better ones come along.

## [React Hook Form](https://react-hook-form.com/) - client-side validation that reduces boilerplate code

![React Hook Form website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgaftsq0fhdg0rifvbnw.png)

Forms require lot of boilerplate - validation, error state, submitting state, default values. This makes writing forms very error-prone, especially as the number of inputs increases. This library handles all of it for you. It can validate the input values without causing un-necessary re-renders. If an input value is invalid or missing, trying to submit the form will put focus on to the input.

Additionally, you can extract form state from the useForm hook to render error messages or disable the submission button when the form is executing its onSubmit function.

If you’re interested in trying it out, here’s a [great tutorial by ByteGrad](https://www.youtube.com/watch?v=u6PQ5xZAv7Q), who demonstrates the reduction in boilerplate thanks to React Hook Form.

## [Zod](https://zod.dev/) - schema validation for client and server

However, what if you need more complex validation than just checking if a value is string or number? Zod is a schema declaration and validation library.  Here’s a code I’ve written for a sign up form for new users.


![Example of Zod schema](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5hsdrnnjbk51d68xdbt.png)

All the required inputs here are strings, which could have been reinforced with regular TypeScript types.  But Zod can also reinforce regex pattern matching, minimum and maximum character requirement. An error message can be provided for each requirement as well. And a TypeScript type can be generated with the z.infer method.

![Type created with zod infer method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fq398wg69q7czdku62ib.png)


Now all you need to do is change the schema and the type will change automatically.

![Integrating zod with React Hook Form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyvrdcq3fstlwkdtzdn3.png)

Define the generic type and pass in the schema with a zodResolver - a package that integrated Zod and React Hook Form. Now *errors* will update with the error messages I provided. Also, Intellisense provides autocompletion!


![How to use React Hook Form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzt462gppngbicf843gu.png)

![Error messages rendered](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbq5b072llcaxa2uf1mm.png)

Update the input and the form will only re-render when input is valid (or invalid again), not on every input change. It does this with [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), which allows subscribing to value changes.

Here’s what’s really great about Zod: you can use the same schema on the server. Which is great because you should **always validate on both the client and the server**! Who knows what malicious actor will bypass your client-side validation. Use the [parse or safeParse method](https://zod.dev/?id=parse) in your API endpoint.

![Schema safeParse method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nf511xr1hgiks3jzm4t4.png)


One source of truth. Less error-prone, type safe, elegant.

## [Prisma](https://www.prisma.io/) - TypeScript ORM

Unlike RHF and Zod, Prisma is a very big library and it’s hard to go over everything in detail. To be concise, I’ll tell you what I used Prisma for.

I created a database schema with Prisma’s own syntax. I installed their official VS Code extension to enable Intellisense, which provided errors for constraints and relationships. It also warned me to add an index for a foreign key field to improve performance.


![Prisma error message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0usi88n7d4p99bm6xhp5.png)

![Prisma autocomplete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6he088li6jxepuxfjp9i.png)

Then I generated Prisma client and TypeScript types for all the models with npx prisma generate. In the example below, I queried the Post table to return 100 posts and join it with other tables. Autocomplete prevents me from making mistakes with my query.

![Prisma client autocomplete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19ai1kihskc2mzv4kdo9.png)

TypeScript knows the shape of the query object. I don’t need to validate the query response anymore.

![Prisma query object has type](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwcid144gdi6b4xxb2xu.png)

I connected Prisma to a database of my choosing and pushed the schema to the database, which is Supabase. With Prisma’s CLI command npx prisma db push, it generated all the tables for me.
![Created database with Supabase and Prisma](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfoou3plnyx8qybr3evs.png)
I realized I neglected to add certain fields required for an entity. No worry, I just update the Prisma schema file, re-run `npx prisma generate` and `npx prisma db push`. Supabase is updated for me. If any table must be cleared of its data, Prisma will warn me and ask if I want to proceed.

Supabase has a visual database but if it didn’t like most CLI apps, I would run `npx prisma studio` and it would provide one for me on a [localhost](http://localhost) port.


![Prisma Studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jimd59abutri34yxp9bn.png)


Prisma has accelerated my backend development. I don’t have to write complex and long SQL strings that are error prone. I have autocompletion and type-safety to prevent me from making mistakes.

## Conclusion

I hope I convinced you to add these 3 libraries to your stack. These libraries work at any scale and helps you write clean code that is self-documenting.