Category: React

React

Rendering long lists using virtualization with React

When working on web applications, we often display lists of data. If the data is not particularly lengthy, we are probably okay with rendering all elements at once. However, as our data grows, we might notice performance issues. In this article, we create a simple React application that aims to render thousands of images using […]

React

Dynamic and recursive forms with Formik and TypeScript

Formik is a popular tool that helps us write React forms and keep their code consistent across even big projects. Besides having a fixed number of properties, we sometimes need to allow the user to shape the form to some extent and create recursive data structures. In this article, we learn how to do that […]

JavaScript React

Using AbortController to deal with race conditions in React

When developing applications, data fetching is one of the most fundamental tasks. Despite that, there are some things to watch out for: one of them is race conditions. This article explains what they are and provides a solution using the AbortController. Identifying a race condition A “race condition” is when our application depends on a […]

JavaScript React

Measuring performance with Web Vitals and React

In this blog, we’ve discussed measuring and improving our performance using the Lighthouse audits. Google continued by introducing new tools that emphasize performance. Some time ago, they introduced the Web Vitals standard. In this article, we go through it and provide examples of measuring the Web Vitals metrics with React. Introducing Web Vitals There are […]

React

Managing WebSockets with Redux Toolkit Query and TypeScript

We’ve learned how to use Redux Middleware to manage WebSockets in a recent article. We’ve also got to know the Redux Toolkit Query and how it can improve our code. Interestingly, we can also use RTK Query to deal with a WebSocket connection. This article teaches how to establish a WebSocket connection with RTK Query […]

React

Introduction to Redux Toolkit Query with TypeScript

The Redux team is working hard to create tools that are helpful in many real-life situations. For example, Redux Toolkit is a big step in simplifying how we write applications with Redux. Another helpful tool is the Redux Toolkit Query. Its primary sources of inspiration are the Apollo Client and React Query. The code we […]

React

Redux middleware and how to use it with WebSockets

Middleware is a great place to connect to WebSockets if you use Redux. This article explains what the Redux Middleware is and how to use it with WebSockets. In this blog, we also talk a lot about various backend technologies such as Express. One of the concepts popular there is middleware. In redux, it serves […]