This video workshop covers essential techniques for managing API requests and states in web and mobile applications. It starts with a tutorial on fetching and posting data using Axios, emphasizing the importance of request cancellation to avoid race conditions. The video then delves into the benefits of implementing an API layer and how to achieve it using Axios. Pagination techniques and the use of React Query for data fetching and state management are also discussed. The workshop includes practical examples, such as setting up a React client and JSON server, and demonstrates how to handle loading and error states effectively. Additionally, it covers the integration of React Router loaders and actions for pre-fetching data and improving rendering times. The session concludes with best practices for providing meaningful user feedback during API requests, such as using boolean flags and error boundaries.
With the rise of frameworks, such as React, Vue or Angular, the way websites are built changed over the years. Modern applications can be very dynamic and perform multiple API requests to populate a website with fresh content or submit new data to a server. However, this paradigm shift introduced new problems developers need to deal with. When an API request is pending, succeeds, or fails, a user should be presented with meaningful feedback. Other problems can comprise API data caching or syncing the client state with the server. All of these problems require solutions that need to be coded, but these can quickly get out of hand and result in a codebase that is hard to extend and maintain. In this workshop, we will cover how to handle API requests, API states and request cancellation by implementing an API Layer and combining it with React-Query.
Prerequisites:
To make the most out of this workshop, you should be familiar with React and Hooks, such as useState, useEffect, etc. If you would like to code along, make sure you have Git, a code editor, Node, and npm installed on your machine.
This workshop has been presented at React Advanced Conference 2022, check out the latest edition of this React Conference.
Comments