Photo by Will Francis on Unsplash

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!

Establishing a WebSocket connection

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…

Photo by Cam Adams on Unsplash

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:

  • persist TODO items in a DynamoDB table
  • use DynamoDB streaming to notify all connected clients about changes in TODO items

I hope it sounds exciting, let’s get started!

Persisting a TODO

Previously addTodo handler was responsible for notifying all connected clients about a new item. …

Photo by Elena Mozhvilo on Unsplash

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:

  • setting up API Gateway with WebSocket support
  • managing connected clients with Lambda and DynamoDB
  • receiving a message and broadcasting it to all connected clients

The infrastructure will be codified with CDK. Let’s get started!


Setting up API Gateway…

Photo by Markus Winkler on Unsplash

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.

Children array

Let’s start with the basic approach that should work in most cases which is passing list elements in children prop.

I use 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…

Photo by Pankaj Patel on Unsplash

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.

Reduce function

Let’s start with writing a reduce function. Just a reminder, a reducer function accepts existing state and an action, and returns…

Photo by Battlecreek Coffee Roasters on Unsplash

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.

Demo application

To set some context I prepared a simple demo app. …

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!

Use union types

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 Text component…

How to build a pipeline that deploys two stacks (backend and frontend) to AWS cloud using CDK.

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:

  1. SSRApiStack which is a backend part (API Gateway, Lambda)
  2. SSRAppStack which is a frontend part (CloudFront, Lambda@Edge, S3 bucket)

The output of SSRApiStack has API url which is needed to build the frontend part. This dependency between the two stacks makes building the deployment pipeline with CDK non trivial. Why? In most…

In my previous article I described a few ways to prevent excess re-renders in react applications. I focused on using useMemo and 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.

Problem statement

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

Maciek Wątroba

Software Engineer |

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store