State Management Libraries — Learn the difference between React built-in, Redux and Mobx with Native

1. Introduction

One friend once asked me: “What are the main differences between React, Redux and Native? “

Well, since it looks like oil and water, let’s improve this question a little bit and use the same basis of comparison: What are the main differences between React built-in, Redux and Mobx with Native?

The shortest answer might be the most complicated one…

Short response: We need our application components to behave as expected, and, for this reason, we need to store them somehow. React built-in, Redux and Mobx with Native offer different state management libraries.

However, if you are not completely satisfied with the previous outcome, just keep reading the article that I might be able to give you further details about these topics.

The current article is mainly dedicated to aspirant developers, new developers, or curious people that would like to expand their knowledge about these subjects.

2. What is React built-in?

Firstly, we need to understand what is React. In a straightforward manner, React is a Javascript library that uses a declarative paradigm to control the application.

Many Javascript frameworks, such as jQuery or Angular, use an imperative approach. In other words, they must teach the computer how to do the desired activity. Instead of it, the React library just gives the order of what should be done.

In order to get a clearer picture, imagine that you are working from home and you would like to have coffee. According to the imperative approach, you might follow this step-by-step to brew your drink. Nonetheless, if you have a coffee maker, it is possible to prepare your drink with a declarative approach. I mean, you can insert your capsule in the machine and 30 seconds after pressing one or two buttons, the coffee will be ready for you.

But, what does React built-in means?

I consider build-in as a default way that React deals to store states. Let’s look at the following example. If you know nothing about coding or React, just ignore the codes since I promise you that they will not interfere with the overall question’s answer.

function BasicCounter() {  const [count, setCount] = React.useState(0)  const increase = () => setCount(num => num+= 1)  return <button onClick={increase}>{count}</button>}
function App() { return <BasicCounter />}

The previous code used vanilla React in order to create a button that will be rendered in an application with a basic counter functionality. In other words, once the user presses the button, it will invoke a callback function (setCount) that will increase the count by 1 unit.

However, SetCount has the same behaviour as a local Javascript variable and it is available only inside the function BasicCounter, where it was declared. So, what should I do to access count or setCount in other functions?

function App() {  <div>  return (    <BasicCounter />    <OtherUsesSetCount />  )  <div>}

To solve this sort of problem and more complex situations related to states to be shared among different functions, we might use one or a combination of methods such as Lifting State Up, Context, Prop Drilling etc. Therefore, React built-in is the set of strategies adopted by the vanilla React to manage state libraries.

3. What is Redux?

Redux, besides being a funny name that could be given to my cat, is a powerful library created to support programmers to manage states. Although it was built by the React Team, it is also compatible with Angular, Vue, Ember, and vanilla JS.

According to the React Redux website:

“The React Redux connect function generates “container” wrapper components that handle the process of interacting with the store for you. That way, your own components can focus on other tasks, whether it be collecting other data, or just displaying a piece of the UI. In addition, connect abstracts away the question of which store is being used, making your own components more reusable.”

Do not be afraid of this definition since, following the React principle of a single source of truth, I will help you break what was said into small pieces and digest this information!

To begin with, let’s rescue our SetCount example. I will not present more codes starting now in order to keep the environment understandable even to those who do not know how to program in React.

Initially, we need to wrap our components (BasicCounter and OtherUsesSetCount) in the “Provider API” provided by React Redux. Then, we should make a store that contains all our functions and make it available to our “Provider”. Despite the fact that the Redux step-by-step is not relevant to answer our question, it can easily be accessed in this tutorial.

After refactoring the code using Redux, count and setCount will be accessible in our whole application as global variables. Therefore, Redux provides us with a lighter app that contains a store of functions resulted from an easy way to manage the state libraries.

4. What is Mobx with Native?

What is “Mobx”?… What is “Native”?… What is “Mobx WITH Native”?… “Let’s go by parts, as Jack the Ripper said”.

In a simple way, Mobx is a global library that works in your application as you work in a spreadsheet graph. All the time you input a new number, your diagram would automatically be updated. So, the Mobx does the same for your application executing the code that solely depends on the states.

Capisce? Then, the next part: (React) Native!

Native (or React Native) is a Javascript framework that allows the developer to build applications in a vast number of mobile systems, such as Android, iOS, Windows Phone etc. In addition, it allows your apps to interact with mobiles camera, GPS and battery.

If you are wondering about the similarities and differences between React and React Native, for this article, just be aware that while React is “only” a framework, React Native is a whole platform to build mobile apps, such as Swift (for iOS) or Kotlin (for Android). Furthermore, React Native uses the same syntax as React what makes the programming knowledge extremely transferable between them.

Thus, the three-point-shot question: What is “Mobx WITH Native”?

Now it is easier to clarify this answer. Mobx is a library that can be used in the React Native platform in order to manage its states. Since Mobx and React Native’s interfaces are compatible, it avoids boilerplate code, and both can be combined without major changes in the Native app’s architecture.

Disclaimer to avoid criticism from other-languages/libraries enthusiastic readers: There are other state management libraries compatible with React Native as well, like Redux, React Context API and Unstated Next. Each one of them might bring distinct advantages and drawbacks.

To sum, do you still remember our BasicCounter function? Therefore, Mobx with Native is a strategy that can be implemented to “bring this state” to a mobile development environment and make it available as a global variable. And, cheers, the explanation is done!!!

5. Conclusion

Like all vague responses that I have been receiving and giving throughout my life related to complex questions, with State Management Libraries is not different. So, what library should I use, React built-in, Redux or Mobx with Native? WELL, IT DEPENDS!

But, to avoid being pedantic, you should probably use React built-in in basic applications, Redux in complex environments where single applications might be connected to a structured system in the future, and Mobx with Native in almost all mobile applications (made in React Native). Just to do not be polemic, although I recommended Mobx to manage Native’s states, there are also other libraries available.

References:

https://www.cognitiveclouds.com/insights/what-is-the-difference-between-react-js-and-react-native/#:~:text=React%20is%20a%20framework%20for,platform%20mobile%20apps%2C%20and%20React.&text=Like%20the%20browser%20code%20in,to%20render%20components%20on%20mobile.

https://www.smashingmagazine.com/2020/08/mobx-state-manager-react-native-applications/#:~:text=Using%20MobX%20In%20React%20Applications,dictates%20what%20a%20component%20renders.&text=However%2C%20it%20is%20important%20to,props%20passed%20down%20to%20it.

I am a tech-savvy engineer with more than 8 years of experience. And, after countless hours of study, I am ready to pursue a full-stack web developer position.