Centralizing state and data handling with React Hooks: on the road to reusable components

1

Sentry.io

​ The typed output by zod is very clean and looks like a typescript type that we would have written ourselves, with the addition that zod parses the JSON using our model. For safety, we use the safeParse method from zod, which allows us to send back the JSON “as is” in case of an error during the parsing step. We would also receive an error on our error tracking tool, Sentry. ​ With our example, our builder function would look like: ​.

#Error Tracking #Exception Monitoring #Monitoring Tools 53 social mentions

2

axios

​ Internally, we use another custom hook useApi (less than 200 lines of code) to handle the GET/POST/PATCH/DELETE. In this hook, we use axios to call the backend API and perform all typical CRUD functionality. For example, on the read side, Axios deserializes the data we receive before it is converted from the JSON API spec to a more classic JSON, and switching from snake_case to camelCase. It also handles any meta information we receive. ​ Also, from a process point of view, it manages request canceling and errors when calling the API. ​.

#Javascript UI Libraries #Developer Tools #JS Library 109 social mentions