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.