If You Think React Is Free to Use, You Are Wrong.

React Is Not Free. Let’s Clarify This.

When you use an abstraction over a complex task, it gives you convenience by moving complexity into a framework, which you learn through another mental model present in your mind.

This adds more concepts, like React mental model complexity, component/state complexity, and reconciliation/runtime complexity.

That’s why I say it: you move complexity into the mental model that is present in the mind.

Another trade-off is control.

You get maximum control when you work directly with DOM manipulation.

But in the case of React, control is given to React.

React manages all the operations, like insertion and deletion of DOM elements and updates to the DOM.

Now, you don’t have direct access to the DOM.

You exchange control for complexity.

If you lose control, then you lose ownership.

Now React becomes the owner of the rendering process.

It becomes a middleman between your application and the browser.

It creates the necessity to understand React’s rules.

That’s it.

Ummmm, really, don’t.

Another big trade-off is runtime overhead and memory.

Assume that React has some work pending to do.

Now, the question is: does React directly hand over this work to the browser?

Really, don’t.

It creates a virtual DOM, then uses reconciliation and updates the Fiber tree before reflecting the updates.

This can make the application slower due to runtime overhead.

Maintaining the React Fiber tree requires additional memory, which is not required in a vanilla JavaScript application due to its limited framework state.

In the case of React, it is not free to use.

You pay the cost through these trade-offs and mental models.