Docker + TS + Terraform + Lambda + ECR + SAM CLI = 💚

This is a full guide to setup, develop and deploy a backend app with a recently released container image feature for lambda on AWS.

Needless to say, if you are a great fan of Docker, you would know how amazing it is. What you test on local is what you get when you deploy it, at least at the container level.

Since this feature is quite new, there have been lots of rabbit holes I fell into, and I’m sure others will too, so I will break every piece of rabbit hole down so that nobody gets trapped into it…

Disclaimer: We will focus on useSelector itself in this article, rather than third-party libraries like reselect, because it's out of the scope of the article.

How was it like before?

Now, before talking about useSelector, we need to know some background. Let's go back to pre-function component era, where all we needed to care about where the props. Not so much you needed to do. Choices were PureComponent and shouldComponentUpdate. Nothing else. Like this:

Right. So if you make such component, this component is only going to update when shouldShowRed is changed. Otherwise, it is going to stay still even if its parent renders…

Yes, Chrome’s performance tab is overwhelming

First time you look into all the charts, you have no idea what means what. What do those different colors even mean? It’s not self-explanatory at all. There needs to be a guidebook.

In this article,

  1. I will briefly walk you through all functionalities of Chrome’s performance tab, with majority of the usual curiosities resolved.
  2. Using what we learned, we will find what made our React components so slow and think about how to improve them.

A very simple example with React

I wrote some short components, <Item /> and <LongList />, to make an example for our article.

And it’s showing me this, which…

Just a random image like everyone else does (credit: Genessa Panainte from unsplash)

I was struggling at my company trying to write some tests for redux-observable operations. Most of the network requests were managed by RxJS, and none of them were covered by tests. I wanted to write tests but just did not know how to.

But I really just wanted to start from the basics — I mean, the very basics, including why, and how we might want to use redux-observable.


If you want to hop straight into the source code, here it is.

What is reactive programming?

Reactive programming is programming with asynchronous data streams.

  • Typical events are async event streams and you want to…

Oddities with how forEach works in JavaScript

Walking dead!!

The first encounter with the problem.

I was coding as usual. And I faced an odd encounter with how forEach works. Here goes the code to give an example of that. Imagine the code below is the code from one of the libraries I was using:

And I spotted the code in my company’s app that was kind of doing:

Of course, I did not want this. It’s against DRY principle. So I refactored the code to:

Cooler and more succinct.

But I was very well tricked into thinking that this would just work. See what this code gave:

Oops. Everybody’s dead…

I believed React is smart enough to know this…. but aye?

We had a bunch of large component trees in our company’s web application. And I saw them re-rendering from the top to deep down to the bottom for no reason. At first, I thought it would be easy to get them correct.

Of course, the tree was much bigger than this. The tree didn’t just reach the end. This made useless re-rendering even a bigger concern. From the top to bottom, Provider, ConnectedRouter, App, PersistGate, ComponentA, ComponentB, .... and so on.

And I saw that there were no use of shouldComponentUpdate/ PureComponent/ memo in our app yet. …

Joel Mun

Code stuffs, mostly related to React and Typescript. located@Seoul.

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