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

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • Yup

    Dead simple Object schema validation

    A refresh function (to refresh the data by calling the API again) ​ ## Building the data ​ Let's take a deeper look at what this code does and how we use it. ​ ## Schema validation with Zod ​ Getting the data is one thing. Ensuring that the data is correctly structured, or typed, is another. Complex data types require validation tools like yup or zod that enforce efficient and clean methods, and offer tools and error handling runtime errors based on faulty types. Our front end relies on strongly-typed data sets, so the validation stage is crucial for us. ​ We use zod. Zod is used to build a model of the data. For example, here is what the model for our Application could look like: ​

  • zod

    TypeScript-first schema validation with static type inference

    A refresh function (to refresh the data by calling the API again) ​ ## Building the data ​ Let's take a deeper look at what this code does and how we use it. ​ ## Schema validation with Zod ​ Getting the data is one thing. Ensuring that the data is correctly structured, or typed, is another. Complex data types require validation tools like yup or zod that enforce efficient and clean methods, and offer tools and error handling runtime errors based on faulty types. Our front end relies on strongly-typed data sets, so the validation stage is crucial for us. ​ We use zod. Zod is used to build a model of the data. For example, here is what the model for our Application could look like: ​

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • axios

    Promise based HTTP client for the browser and node.js

    ​ 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. ​

  • react-query

    Discontinued 🤖 Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue. [Moved to: https://github.com/TanStack/query]

    ​ At this point, we can summarize: the useApi hook gets the data, which is then passed through the builder to be validated and enriched; and the resulting data is cached using react-query. ​ We implemented react-query for caching the data on the front end, using the API endpoint URL as the cache key. React-query uses the useApi hook mentioned above to fetch, synchronize, update, and cache remote data, allowing us to leverage all these functionalities with a very small codebase. All we have to do on top of that is to implement react-query’s provider. To do so, we’ve constructed a small react component: ​

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts