Did you ever think about what problem React actually tries to solve?
So, the problem starts when you need to build a complex layout, and this layout depends on multiple states.
Now, the problem starts. How do you keep this complex UI synchronized with changing application state without manually managing every DOM change?
Before React, you needed to figure out which DOM elements were affected by a particular state change. Then, you needed to find those elements and modify them manually. You had to make sure every affected element was updated properly so the UI remained consistent with the application state.
But React took a somewhat different approach. It changes the programming model, where the current state describes what the UI should look like. Now, React determines what needs to change and updates the host environment.
1. Direct DOM Manipulation
When the UI gets complicated and you need to change the UI in multiple places, the task becomes complicated because the developer has to manually maintain the relationships between application state and the UI.
React manages DOM manipulation itself.
2. Declarative UI
In other frameworks or libraries, you need to explicitly say:
- Do this.
- Find that element.
- Change its text.
- Add the class.
- Remove this button.
- Show that button.
- Hide that element.
This is imperative UI.
But React uses Declarative UI, where React takes responsibility for keeping the actual UI consistent with that declaration. This becomes the responsibility of the framework/runtime instead of the application's responsibility.
3. Change Propagation Problem
Change propagation means how you propagate this change throughout the UI.
If you do this task manually, then there might be some chances of forgetting the changes in the UI.
To eliminate this, React establishes a model where changes in state automatically re-render the relevant component tree and reconcile the result.
These are the changes that React solves perfectly, but other frameworks or libraries miss out on.
Top comments (0)