In this blog post I’m going to demonstrate how to build a React app that communicates with WebSocket API I built previously. Don’t worry if you didn’t read the previous post, hopefully this one will still make sense.
Along the way I’m going to explore how we can properly separate concerns in React, specifically how to use service locator and dependency injection patterns as well as how to separate presentational and container components. Let’s get started!
I’m going to use the WebSocket API without any fancy wrapper, although in a real life application I’d seriously consider one to handle things…
In my previous post I started building a simple TODO application that allows real-time cooperation by broadcasting new TODO items to all connected clients via WebSocket connections. In this post I’m going to build on the top of it and describe how to:
I hope it sounds exciting, let’s get started!
addTodo handler was responsible for notifying all connected clients about a new item. …
This is the first part in a series of posts in which I am going to describe the steps to build a TODO list that allows real-time cooperation. This can be useful if you want to share some tasks with friends and observe the progress in real time.
In this post I’m going to describe the backend part which will consist of:
The infrastructure will be codified with CDK. Let’s get started!
Displaying a list of items is something web developers find themselves doing all the time. React doesn’t have a standard way to render a list of items, however there are some patters that are certainly good to know. We are going to explore some of them in this post.
Let’s start with the basic approach that should work in most cases which is passing list elements in
I use React.Children.map so I don’t need to worry whether
children is a single item or an array of items. Notice that
ListView component is responsible for the list structure…
Redux used to be my primary choice for managing global application state. I loved its simplicity, community around it, awesome developer tools. However, I also like to keep my apps’ dependencies to the minimum. With the context API and hooks (to be more specific useContext and useReducer) we can pretty easily replace basic Redux with tools that are already built-in react. While doing it we can still operate on concepts we already know, like actions, state or reduce function.
Let’s start with writing a reduce function. Just a reminder, a reducer function accepts existing state and an action, and returns…
Redux is a powerful library for handling global state. Some people hate it, some people love it. One thing I know for sure, if you use redux in your React codebase you want to have it tested. If you don’t, it will impair your ability to ship new features with confidence. In this post I’m going to describe a simple yet powerful way to test a Redux-connected React component using React Testing Library.
I love TypeScript. I consider it to be a best practise when setting up a new React project (even a simple one!). It is a great tool for improving developers’ productivity and avoiding some bugs. Getting started is easy, both create-react-app and nextjs come with built-in support.
In this article I’m going to demonstrate some techniques that you can use in your day to day work with TypeScript and React. Let’s get started!
Whenever a given prop can accept a constrained set of values using union types is a good idea. Let’s say you want to create a
This post assumes some basic CDK knowledge. If you want to get started with CDK I highly recommend this self-study workshop.
Some time ago I read a blog post about building server-side rendering for React in AWS Lambda. The project presented in this blog consists of two stacks:
SSRApiStackwhich is a backend part (API Gateway, Lambda)
SSRAppStackwhich is a frontend part (CloudFront, Lambda@Edge, S3 bucket)
In my previous article I described a few ways to prevent excess re-renders in react applications. I focused on using
useCallback hooks and
memo() HOC. Just a day later an excellent article from Dan Abramov entitled Before You memo() was published. Today I will present how the techniques presented in his blog may be applied to the problem from my article.
Let’s start with exactly the same code I used in my previous post. …
When developing a React application I typically don’t think a lot about rendering performance. React has its famous tree reconciliation algorithm that efficiently updates the UI. This approach works fine until it doesn’t and this is what this post is about.
Render functions can be expensive
Let’s consider a component that displays the nth fibonacci number to simulate a real-life application component that does a lot of data processing in the render method.
It uses a very ineffective recursive algorithm to compute the nth fibonacci number so it gets very slow as n increases. …