What’s the difference between useContext and Redux ?

21 May, 2021
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:
ActionReducerStore
Action
Reducer
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
Picked
React-Questions
ReactJS-Advanced
Redux
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Axios in React: A Guide for Beginners
ReactJS useNavigate() Hook
How to install bootstrap in React.js ?
How to create a multi-page website using React.js ?
How to do crud operations in ReactJS ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Differences between Functional Components and Class Components in React