React Context VS React Redux, When Should I Use Each One

React Context vs React Redux, when should I use each one?

As Context is no longer an experimental feature and you can use Context in your application directly and it is going to be great for passing down data to deeply nested components which what it was designed for.

As Mark Erikson has written in his blog:

If you're only using Redux to avoid passing down props, context could
replace Redux - but then you probably didn't need Redux in the first
place.

Context also doesn't give you anything like the Redux DevTools, the
ability to trace your state updates, middleware to add centralized
application logic, and other powerful capabilities that Redux
enables.

Redux is much more powerful and provides a large number of features that the Context API doesn't provide, also as @danAbramov mentioned

React Redux uses context internally but it doesn’t expose this fact in
the public API. So you should feel much safer using context via React
Redux than directly because if it changes, the burden of updating the
code will be on React Redux and not you.

Its up to Redux to actually update its implementation to adhere with the latest Context API.

The latest Context API can be used for Applications where you would simply be using Redux to pass data between components, however applications which use centralised data and handle API request in Action creators using redux-thunk or redux-saga still would need Redux. Apart from this Redux has other libraries associated with it like redux-persist which allows you to save/store data in localStorage and rehydrate on refresh which is what the Context API still doesn't support.

As @dan_abramov mentioned in his blog You might not need Redux, Redux has useful applications like

• Persist state to a local storage and then boot up from it, out of the box.
• Pre-fill state on the server, send it to the client in HTML, and boot up from it, out of the box.
• Serialize user actions and attach them, together with a state snapshot, to automated bug reports, so that the product developers
  
  can replay them to reproduce the errors.
• Pass action objects over the network to implement collaborative environments without dramatic changes to how the code is written.
• Maintain an undo history or implement optimistic mutations without dramatic changes to how the code is written.
• Travel between the state history in development, and re-evaluate > the current state from the action history when the code changes, ala TDD.
• Provide full inspection and control capabilities to the development tooling so that product developers can build custom tools for their apps.
• Provide alternative UIs while reusing most of the business logic.

With these many applications its far too soon to say that Redux will be replaced by the new Context API.

react context vs redux vs hooks, which one should consider and how each one is different

React Context is used to store state and share it across multiple components. It is especially useful when you have a deep tree of components and do not want to pass down state as props across multiple levels of components. Contexts in React consist of a Provider (where you set the value of the context) and a Consumer (where you get the value).

React Hooks provide a useContext Hook, which is another way to access context values. useContext replaces the Consumer component.

Redux is a state management library. It does a lot more than simply storing state with a set/get interface as Contexts do. Internally, Redux actually uses React Context to store its state. However, it additionally forces you to change state via actions. This makes sense if your state changes are complex (e.g. a single action should change multiple parts of your state). In a complex application, Redux can prevent bugs and inconsistent state.

As a rule of thumb, you should use React Context as long as your state changes are simple. If you run into problems where it is hard to keep multiple parts of your state in sync, it might make sense to consider Redux.

Whether you want to use Context Consumers or Hooks is totally up to you and a matter of taste. The advantage of using Hooks is that you can consume multiple contexts more easily without having a deep component tree.

Context Consumers:

   <AuthenticationContext.Consumer>
       {user => (
           <LanguageContext.Consumer>
               {language => (
                   <StatusContext.Consumer>
                       {status => (
                           ...
                       )}
                   </StatusContext.Consumer>
               )}
           </LanguageContext.Consumer>
       )}
    </AuthenticationContext.Consumer>

useContext Hooks:

const user = useContext(AuthenticationContext)
const language = useContext(LanguageContext)
const status = useContext(StatusContext)

As for the Providers, they are the same whether you use Hooks or not.

Do I need to use Redux or Context API

To pass data to other screens you can use React Navigation navigate method and passing some data inside of it.

i don't know how you stored you Data whether using a database like Realm or SQLite etc... but whenever you fetch data from there and you want to pass it to other screens do this like below:

this.props.navigation.navigate('SecondPage', {
        //your data goes here
        });

for example :

this.props.navigation.navigate('Homescreen', {
       username: this.state.username,
       });

and then you can get that data like below:

const username = navigation.getParam('username', 'Default'); //default is a value that will be used if there was no username passed 

React: Would it a better choice to use redux than context to pass a value from child to parent and share it with sibling components?

You can use both Context and Redux to share data across components in react without using props.

There are 2 main things to consider when you choose between.

1. Redux updates states faster than Context

   If you need to access your states quickly, or if your states change too rapid, then it is more convenient to use Redux.

2. When you have too many Contexts you will have to manage different contexts across your app i.e. wrap different components with different contexts or wrap same component with too many contexts(I call it context hamburger, when the number of contexts grow it might get messy).

You can use both at the same time. There is no problem with that. For login information, Context is used more often, since you only login and logout once in a while.

Can React-Redux and React Context API be used both in the same project?

It really depends on the use case.

If you're looking for top-down props pass down structure where the same data is used over multiple depths of components (such as Theme, Auth, etc.), Context API is the way.

If you're looking for a big store where you can dynamically manage data and constantly update it, Redux is the way.

If you need both, my opinion is that it's perfectly okay to do so.

They're not very heavy, (I guess a Redux.. a lil bit?) and they do have different purposes anyway.

Does it make sense to use context in react-redux app?

Context can be used in any sort of react-redux application.

Both solves different purposes.

Redux is a state management tool and often used in one of the following cases.

• If we need to use the middlewares between the dispatch of action and the response like logging actions, error handling, dispatching other requests depending on the server’s response.
• If data is coming to the a component from the multiple endpoints.
• It gives greater control over actions in the application. Redux enables tracking actions and data change, it greatly simplifies debugging with its devtools.

On the other hand Context provides a way to pass data (globally in the app) through the component tree without having to pass props down manually at every level like translations, themes or anything which will be used across the app.

Based on the requirement, we can choose when to use redux or context to solve different purpose.

---

Related Topics