Skip to content
Related Articles

Related Articles

Improve Article

What’s the difference between useContext and Redux ?

  • Difficulty Level : Easy
  • Last Updated : 21 May, 2021
Geek Week

useContext: useContext is a hook that provides a way to pass data through the component tree without manually passing props down through each nested component.

Syntax:

const Context = useContext(initialValue);

Project Structure: It will look like this.

Example: In this example, App.js is sending data to component ComC with the help of useContext.



App.js

Javascript




import React, { createContext } from 'react';
import "./index.css";
import ComB from './ComB';
  
const Data = createContext();
  
export default function App() {
  return (
    <div className="App">
      <Data.Provider value={"Welcome to GFG"}>
        <ComB />
      </Data.Provider>
    </div>
  );
}
  
export { Data };

ComB.js

Javascript




import React, { useState } from "react";
import ComC from "./ComC";
  
const ComB = () => {
  const [show, setShow] = useState(false);
  return (
    <>
      {show ? <ComC /> : null}
      <button onClick={() => setShow(!show)}>
        Click ME</button>
    </>
  );
}
  
export default ComB;

ComC.js

Javascript




import React, { useContext } from 'react';
import { Data } from './App';
  
const ComC = ({ name }) => {
  const context = useContext(Data);
  return <h1>{context}</h1>
}
  
export default ComC;

Output:



Redux: Redux is a state managing library used in JavaScript apps. It is very popular for React and React-Native. It simply manages the state and data of your application.

Building Parts of redux:

  1. Action
  2. Reducer
  3. Store

Project Structure: It will look like this.

Example: In this example, we have created two buttons one will increment the value and another will decrement the value. With Redux, we are managing the state.

App.js

Javascript




import React from 'react';
import './index.css';
import { useSelector, useDispatch } from 'react-redux';
import { incNum, decNum } from './actions/index';
  
function App() {
    
  const mystate = useSelector((state) => state.change);
  const dispatch = useDispatch();
  
  return (
    <>
      <h2>Increment/Decrement the number using Redux.</h2>
      <div className="app">
        <h1>{mystate}</h1>
        <button onClick={() => dispatch(incNum())}>+</button>
        <button onClick={() => dispatch(decNum())}>-</button>
      </div>
    </>
  );
}
  
export default App;

index.js (In src/actions folder)

Javascript




export const incNum = () => {
   return{ type:"INCREMENT"}
}
  
export const decNum = () => {
   return{ type:"DECREMENT"}
}

func.js



Javascript




const initialState = 0;
  
const change = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT": return state + 1;
    case "DECREMENT": return state - 1;
    default: return state;
  }
}
  
export default change;

index.js (In src/reducers folder)

Javascript




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

store.js

Javascript




import {createStore} from 'redux';
import rootReducer from './reducers/index';
  
const store = createStore(rootReducer,window.__REDUX_DEVTOOLS_EXTENSION__ && 
window.__REDUX_DEVTOOLS_EXTENSION__());
  
export default store;

index.js (In src folder)

Javascript




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

Output:

Some difference between useContext and Redux:

useContext 

Redux

useContext is a hook.Redux is a state management library.
It is used to share data.It is used to manage data and state.
Changes are made with the Context value.Changes are made with pure functions i.e. reducers.
We can change the state in it.The state is read-only. We cannot change them directly.
It re-renders all components whenever there is any update in the provider’s value prop.It only re-render the updated components.
It is better to use with small applications.It is perfect for larger applications. 
It is easy to understand and requires less code.It is quite complex to understand.



My Personal Notes arrow_drop_up
Recommended Articles
Page :