Separation of Concerns: Split Your React Components into Containers and Views
...Many frontend engineers probably have experienced the head-scratching moment when their React components become so gigantic that they keep losing their train of thought when navigating through their frontend code. To salvage readability, one of the most common practices is to split up the humongous React components into smaller pieces. Traditionally, they would do this by chopping up the JSX elements. This method can effectively improve the readability of React components whose sole responsibility is to display data. However, on top of displaying data, some React components are also responsible for retrieving data from the backend. The more effective way to make such React components readable is to separate them into Containers and Views. In this article, I will demonstrate how to divide a React component into a Container and a View based on the principle of separation of concerns.
The Whys and Hows of Promise in JavaScript
...If you have done any web development after 2015, chances are that you have heard of the concept of Promise. It wouldn’t be an overstatement to claim that Promise is ubiquitous in modern-day front-end codebases. However, many web developers—especially those who do not have much experience in front-end development—have been using Promise without thoroughly understanding its inner working. This has led to countless misuses of Promise and consequent bugs. In this article, I will walk you through what motivated the creation of Promise, how Promise works, and how we should use it in our code, under the assumption that you don’t have much experience in front-end development.