When?
When building an application, the most crucial part is choosing the framework for the programming language that we use. The framework that we choose has the potential to enhance the capabilities of the application in the long run. Selecting the right framework can open doors to countless possibilities while choosing the wrong one can close them just as quickly.
When faced with the task of selecting a framework for JavaScript-based applications, the common trend is to swiftly conclude, often leaning towards React—a really good decision by the way. 🤷♂️
However, the method of blindly settling on this choice may not align with best practices, even though the eventual outcome often proves to be successful.
Why?
Why does the selection of a framework matter?
While building an application, the most common aspect is to understand the nature of the application. Nowadays, the majority of the applications follow configuration-driven UI methodology. This means the UI elements of the application should dynamically adapt or modify itself in response to frequently changing data. The most common example of config-driven UI is Swiggy, Zomato, Netflix and YouTube.
To build this complex structure without compromising on performance and user experience, the synchronization between the data layer and UI layer should be maintained properly.
In comparison to other frameworks, React excels at maintaining synchronization between the data and UI layers. Competing frameworks are striving to match React's prowess in this crucial aspect.
How?
How does React maintain the data and UI sync?
React is faster because of React's render cycle. With the faster render cycle, React can manipulate the DOM faster and more efficiently. React's render cycle consists of different life-cycle methods for collecting props, initializing data and state and rendering of the data.
React divides its operations into two distinct phases: the Render Phase and the Commit Phase. During the Render Phase, React batches tasks such as prop and data collection along with state initialization into a unified process. Once the Render Phase is completed, React transitions into the Commit Phase, where the actual rendering of data onto the DOM takes place.
This division ensures that React initiates DOM manipulation only after the comprehensive Render Phase concludes, guaranteeing that the rendering of data reflects the most up-to-date information. For instance, when fetching data from an API and subsequently storing it, or when the data gets updated through various mechanisms, React ensures that it enters the Commit Phase with the latest data, providing a seamless and accurate representation of the application state.
It's essential to understand that React doesn't re-render unchanged DOM data; instead, it employs a Virtual DOM—a replica of the actual DOM. By comparing changes against this Virtual DOM, React efficiently updates only the altered data. This concept enhances React's ability to optimize DOM updates.
What?
What are the other factors that influence the performance of an application?
An application's performance is influenced by more than just React. It's a collection of different factors such as codebase quality, bundler choice (e.g., Parcel, Vite, Webpack), and infrastructure.
Well-structured code improves readability, reusability and maintainability. An optimal bundler will reduce load times and offer tree shaking, and infrastructure choices significantly impact response times and scalability. Balancing these elements ensures a high-performing application.