The simplest way to pass data from a parent to a child in a React Application is by passing it on to the child's props. But an issue arises when a deeply nested child requires data from a component higher up in the tree. If we pass on the data through the props, every single one of the children would be required to accept the data and pass it on to its child, leading to prop drilling, a terrible practice in the world of React.

To solve the prop drilling issue, we have State Management Solutions like Context API and Redux. But which one of them is best suited for your application? Today we are going to answer this age-old question!

What is the Context API?

Let's check the official documentation:

In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

Context API is a built-in React tool that does not influence the final bundle size, and is integrated by design.

To use the Context API, you have to:

1. Create the Context
   

   const Context = createContext(MockData);

2. Create a Provider for the Context
   

   const Parent = () => {    return (        <Context.Provider value={initialValue}>            <Children/>        </Context.Provider>    )}

3. Consume the data in the Context
   

   const Child = () => {    const contextData = useContext(Context);    // use the data    // ...}

So What is Redux?

Of course, let's head over to the documentation:

Redux is a predictable state container for JavaScript apps.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time-traveling debugger.

You can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies), but has a large ecosystem of addons available.

Redux is an Open Source Library which provides a central store, and actions to modify the store. It can be used with any project using JavaScript or TypeScript, but since we are comparing it to Context API, so we will stick to React-based Applications.

To use Redux you need to:

1. Create a Reducer
   

   const initialState = 0;const reducer = (state = initialState, action) => {    switch (action.type) {        case "CASE-1": return modifiedState01;        case "CASE-2": return modifiedState02;        // ...        default: return state;    }}export default reducer;

2. Combine Reducers
   

   import reducer from './reducer'import { combineReducers }from 'redux';const rootReducer = combineReducers({ reducer });export default rootReducer;

3. Create Store
   

   import { applyMiddleware, compose, createStore } from 'redux';import rootReducer from './reducers/index';const composeEnhancers =    (process.env.NODE_ENV === "development"        ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__        : null) || compose;const store = createStore(    rootReducer,    composeEnhancers(applyMiddleware(thunk)));export default store;

4. Make the Store available for data consumption
   

   import React from 'react';import ReactDOM from 'react-dom';import { Provider } from 'react-redux';import App from './App.jsx'import store from './store';ReactDOM.render(    <Provider store={store}>        <App />    </Provider>,    document.getElementById("root"));

5. Create Actions
   

   export const func01 = () => {    return { type: "CASE-1"}}export const func02 = () => {    return { type: "CASE-2"}}

6. Use State or Dispatch Actions
   

   import { useSelector, useDispatch } from 'react-redux';import { func02, func02 } from './actions/index';const Component = () => {    const data = useSelector((state) => state.reducer);    const dispatch = useDispatch();    const doSomething = () = > dispatch(func01)      return (        <>            {/* ... */}        </>    );}export default Component;

That's all Phew! As you can see, Redux requires way more work to get it set up.

Comparing Redux & Context API

From the table, you must be able to comprehend where the popular opinion Redux is for large projects & Context API for small ones come from.

Both are excellent tools for their own specific niche, Redux is overkill just to pass data from parent to child & Context API truly shines in this case. When you have a lot of dynamic data Redux got your back!

So you no longer have to that guy who goes:

Wrapping Up

In this article, we went through what is Redux and Context API and their differences. We learned, Context API is a light-weight solution which is more suited for passing data from a parent to a deeply nested child and Redux is a more robust State Management solution.

Happy Developing!

Thanks for reading

Want to know the Secret to Unlimited Fuel in your Motivation Tank? Check out my article on Medium

Need a Top Rated Front-End Development Freelancer? Contact me on Upwork

Want to see what I am working on? Check out my GitHub

I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram

Follow my blogs for Weekly new Tidbits on Dev

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

1. I am a beginner, how should I learn Front-End Web Dev?
   Look into the following articles:

   1. Front End Development Roadmap
   2. Front End Project Ideas

2. Would you mentor me?
   
   Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

3. Would you like to collaborate on our site?
   
   As mentioned in the previous question, I am in a time crunch, so I would have to pass on such opportunities.

Connect to me on

• LinkedIn
• Portfolio
• Upwork
• GitHub
• Instagram