Consequences of Space Complexity in React Apps

Question

I've recently been taking a class on Big O Notation for space and time complexity and I'm trying to apply the concepts to their real world consequences in my day to day job as a React developer. I understand the consequences of time complexity. If a function is a higher complexity the larger that the data set grows the longer it will take to compute, ergo longer load times for the user which no one likes. What I don't understand is the consequences of space complexity in a React App. What are the consequences to either the user or the application if you have a really large data set and you end up using a huge amount of space in the browser?

Answer 1

Actually, it is not based specifically on React or any other frameworks. The concept of time complexity and space complexity doesn't depend much on frameworks or languages. That is the concept behind using time and space complexity notations.

Now coming to your question, the answer really depends on the browser you are using to run your React App. Every browser allocates max memory to each tab. If the website uses more than the allocated memory, the browser kills that webpage.

Here is a question about memory limits on StackOverflow--

Javascript memory limit

In Chrome and Chromium OS, the memory limit is defined by the browser, and you can inspect the limit with the following command in the Developer Tools command-line by hitting F12:

window.performance.memory.jsHeapSizeLimit 1090519040 On my Windows 10 OS, it is about 1 GB.

On Chrom(e/ium), you can get around the heap size limit by allocating native arrays:

var target = [] while (true) { target.push(new Uint8Array(1024 * 1024)); // 1Meg native arrays }

This crashes the tab at around 2GB, which happens very rapidly. After that Chrom(e/ium) goes haywire, and repeating the test is not possible without restarting the browser.

In the above link, there is a mention of react and angular

Here are some examples of frameworks with well-known performance degradation:

..........

React Again,

Immutable collections of JS objects only scale so far.

create-react-app internally uses Immutable.JS, and Immutable.JS can only create about 500k immutable collections before it dies.

One more side effect the user can experience is overall system lag. The lag may be due to the low RAM available and OS actively swapping to allocate more memory to your app until you reach your max limit before the browser kills it.