React Advanced

React Advanced 2023

Zotter is a powerful tool for working with TypeScript in React applications, providing a simple schema concept for validation. It allows you to convert Zod schemas into TypeScript types and check if objects match the schema. Zod can be used for validation and contract enforcement, ensuring data consistency and preventing issues. It can also be used in React applications to create a validation layer and prevent code from running with incorrect data. The speaker encourages questions and provides contact information for further discussion.

Many Javascript developers have added typescript to their projects in the last few years. But how many of them are sure of their types at runtime? Can types be guaranteed on runtime too? Using Zod that can be realized! Let's see together how we can use Zod to improve the awareness of our code during its execution and prevent strange mistakes or a bad user experience.

Zod === TypeScript, but at Runtime in Your React Applications

Luca Del Puppo

React Summit

React Summit 2023

Today's Talk discusses how Zod, an NPM library, can guarantee the TypeSystem at runtime, providing all the benefits of TypeScript. Zod's parse method allows for checking if objects match the schema, creating a validation layer between applications and APIs. By combining TypeScript with Zod, developers can ensure type safety at both runtime and build time, preventing code execution with incorrect data and improving the user experience.

In this talk, I want to show how we can use Zod to guarantee the type in a React Application at runtime. Environment variables, HTTP requests, forms and so on could create troubles in our applications, mainly if they contain unexpected types. Using Zod, we can create schemas to guarantee the types expected in our editor at runtime. In this way, we can react quickly when an environment variable misses or when someone changes the API contract without informing us. A small validation layer in our applications can prevent a bad user experience and notify us immediately, so we can fix the problem as soon as possible and mitigate the visualization of wrong data.

#zod in react