reactive programming in react

Question

I have a fundamental question about reactive programming in react. As you know, a react component re-renders only if one of its props changes and does not aware of what happened inside the props. But I think this is not a good approach especially when you have a global state that most of your components subscribed it. Is it really a problem or I'm missing something?

A better approach may be using a reactive library like rx-js to broadcast the changes in the state. So the components rerender only if the changes are relevant to them. Is it a good approach to use rx-js in such cases? Why does react follow a different approach?

Chromatograph

You may find this article interesting. It is about using reactive programming in React. This repo has also an example. – Gibran

Another interesting option is react-rxjs.org – Coniah

"As you know, a react component re-renders only if one of its props changes[ ...]" this is not true. React components rerenders also when state changes. What you are searching for is context api or redux store. – Moderation

Answer 1

React, Svelte, Vue - all of these frameworks are not about reactive programming at all.

They're MVVM - it means that their only responsibility is to keep your View-Model (an application layer that is responsible for data user sees) in sync with View (the document).

The main difference of Reactive Programming implementations and MVVM's is the scope of usage:

• Reactivity ends outside of the View layer
• Reactive Programming allows you to have an application-wide reactive graph

When people say that "N is a reactive framework", they usually have MVVM reactivity in mind, not Reactive Programming.

Also, while RP is mostly associated with FRP (Functional Reactive Programming), it's not right. There are three sub-paradigms:

• procedural - Solid, etc.
• functional - RxJs, etc.
• objective - MobX, etc.

I prefer objective style because it's blazing fast, scalable and elegant.

Bridging