Photo by Nate Grant on Unsplash

What is React’s Virtual DOM?

The official React documentation says that:

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

In reality, the virtual DOM is just an organized collection of React elements — plain objects, and it mimics the browser DOM in a way that is easier to maintain and update.

Let‘s take a step back and check out an example of a React element.

JSX does the heavy lifting to convert the familiar…


Photo by Markus Spiske on Unsplash

So a colleague of mine shared this tweet with us on Slack.

I, too, was once guilty of this. Alright, actually more than once. 😅 There was a time when I never really put much thought into this and that some people will definitely use characters outside that [a-z]+ regular expression.

I was born in the Philippines and the majority of Filipinos have Spanish last names––even I have one. So people with the characters é and ñ in their names are pretty common back home. And that RegEx will definitely mark those people’s names as invalid.

Fast-forward to 2021…


Photo by Jonas Von Werne on Unsplash

Nobody likes slow, unresponsive apps. Most of the time, it is caused by unnecessary re-rendering of components with props that don’t even change. And you might not even be aware of it, but React still performs the rendering of a component even when it has the same props. But fret not, React.memo comes to the rescue!

What is React.memo()?

From the official React documentation we can read that:

React.memo is a higher order component.

If your component renders the same result given the same props, you can wrap it in a call to React.memo for a performance boost in some cases by memoizing…


The 12th edition of ECMAScript is scheduled to be approved on June 2021 by the ECMA General Assembly. And by this time, it’s pretty much set in stone what upcoming features are going to make the standard specification.

Listed in this article are the upcoming features to JavaScript that will definitely make development easier.

String.prototype.replaceAll()

Currently, we can replace all occurrences of a string to another value by using String.prototype.replace() and passing a regular expression with the global flag.

ES2021 takes this up another level by introducing String.prototype.replaceAll() which saves us the trouble of using regular expression.

We can…


This is the part 3 of a mini-series where we try to build a simple chat app on React and AWS Amplify.

If you haven’t read part 1 and part 2 you should definitely check them out.

Recap

In part 2 of the mini-series, we’ve made our app a little bit prettier and added sending messages using AWS Amplify and the Subscriptions API.

This time we’ll be adding the authentication layer for our app, allowing users to create an account, login to chat, and log out.

Authentication with AWS Amplify

AWS Amplify uses Amazon Cognito under the hood which allows us to handle user sign…


This is the part 2 of a mini-series where we try to build a simple chat app on React and AWS Amplify.

If you haven’t read part 1, you can check it out here.

Recap

In the previous article, we got to shake hands with AWS Amplify and how powerful it is to include in our arsenal as a mobile or front-end developer. We’ve successfully configured our React app to use Amplify. We’ve also learned how to create and list messages using the GraphQL API.

As I mentioned before, we will be talking about AWS AppSync Subscriptions in this article as…


Photo by Markus Spiske on Unsplash

Advancements in technology could arguably be one of the fastest moving things in the world. Over the past two decades, we’ve seen developments in web technologies happen in a blink of an eye. We’ve seen the rise and fall of Web 2.0, jQuery, and the empire of monolithic web apps. More and more developers opt to break apart their applications into smaller, more structured pieces of code, taking the “M”, the “V”, and the “C” from MVC into next levels. We’ve also seen the rise of better tooling for developers, making it easier than ever to create and deploy apps.

Jaune Carlo Sarmiento

Builds web and mobile applications on JavaScript, React, and React Native. Has an itch for better UX.

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