More articles you can read:
- Using Golang to Build a Real-Time Notification System - A Step-by-Step Notification System Design Guide
- JSON is Slower. Here Are Its 4 Faster Alternatives
I heard that recently, and there is some truth to that. Let's see the example use-case.
Imagine you have this dynamic list on a website showing real-time orders from customers worldwide. This list can get pretty massive, with the potential for 1 to 50 new orders popping up every single minute. Now, if you were to gather all the orders from a whole day and export them as a file, it could easily be a couple of hundred mb(s) in size.
The challenge here is how to efficiently update and show this constant stream of new orders on the website's frontend.
Imperative Approach with a Linked List:
React's Declarative Nature:
React's O(N) Complexity:
- The React approach involves reconstructing the entire list with each state update. This process has a time complexity of O(N), making it less efficient, especially as the number of orders grows. Each re-render essentially discards the old array and constructs a new one, impacting the overall performance.
In this scenario, the imperative, direct-command approach appears more efficient than the declarative, state-driven approach of React. The imperative approach embraces the continuous addition of new orders without the need for extensive reconstruction, offering a streamlined and faster solution for real-time updates.
Does it mean React is slower than vanilla JS?
1. Declarative vs. Imperative Paradigms:
- React operates under a declarative paradigm, emphasizing expressing the desired UI state rather than issuing direct commands to the DOM. While this approach introduces a layer of abstraction, it doesn't inherently translate to slowness. The perceived 'slowness' may arise when comparing it to the imperative approach's seemingly direct manipulation of the DOM.
2. Context-Dependent Efficiency:
- React's efficiency is context-dependent and contingent on the nature of the application and the developer's proficiency. In certain real-time scenarios, the imperative approach might appear faster, especially when dealing with a continuous stream of updates. However, this doesn't diminish React's inherent speed; it merely underscores the need for strategic implementation.
3. Unlocking React's True Potential:
- React becomes a performance powerhouse when developers adopt advanced coding practices and leverage optimization tools. The use of React's virtual DOM, intelligent state management, and reconciliation algorithms allows for efficient updates without the need for an entire DOM overhaul. React's efficiency shines through when developers capitalize on these features to streamline processes and enhance overall performance.
4. Strategic Optimization and Smart Coding:
- React's efficiency is not a passive attribute; it requires active engagement from developers. By adopting smart coding practices, such as keying each item uniquely, optimizing render conditions, and minimizing unnecessary updates, developers can unlock React's full potential. Strategic optimization ensures that React operates seamlessly, even in scenarios with high-frequency updates.
5. Misunderstanding the Nature of React:
Similar to this, I run a developer-centric community on Slack. Where we discuss these kinds of topics, implementations, integrations, some truth bombs, lunatic chats, virtual meets, and everything that will help a developer remain sane ;) Afterall, too much knowledge can be dangerous too.
I'm inviting you to join our free community, take part in discussions, and share your freaking experience & expertise. You can fill out this form, and a Slack invite will ring your email in a few days. We have amazing folks from some of the great companies (Atlassian, Gong, Scaler etc), and you wouldn't wanna miss interacting with them. Invite Form