In React, useContext and Redux both approaches provide ways to manage and share state across components. Both work and manage global data to share and access from any component present in the application DOM tree, but they have different purposes and use cases.
Table of Content
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. It is designed to share data that can be considered global data for a tree of React components, such as the current authenticated user or theme(e.g. color, paddings, margins, font-sizes).
Syntax:
const Context = useContext(initialValue);
Steps to create the React application:
Step 1: Create React Project
npm create-react-app myreactapp
Step 2: Change your directory and enter your main folder charting as
cd myreactapp
Project Structure:
Example: In this example, App.js is sending data to component ComC with the help of useContext.
Javascript
// filename - App.jsimport 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 }; |
Javascript
// Filename ComB.jsimport 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; |
Javascript
// Filename ComC.jsimport React, { useContext } from "react";import { Data } from "./App";const ComC = ({ name }) => { const context = useContext(Data); return <h1>{context}</h1>;};export default ComC; |
Step to run the application:
Open the terminal and type the following command.
npm start
Output: Open the browser and our project is shown in the URL http://localhost:3000/
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
- Action: Actions are JavaScript object that contains information. Actions are the only source of information for the store.
- Reducer: Reducers are the pure functions that contain the logic and calculation that needed to be performed on the state.
- Store: Store is an object which provides the state of the application. This object is accessible with help of the provider in the files of the project.
Step to install Redux: Use this command in project directory
npm i @reduxjs/toolkit react-redux
Project Structure:
Depemndencies list after installtin redux in package.json
{
"name": "myreactapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"@reduxjs/toolkit": "^1.9.7",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.1.3",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
}
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.
Javascript
// filename - App.jsimport 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; |
Javascript
// actions/index.jsexport const incNum = () => { return { type: "INCREMENT" };};export const decNum = () => { return { type: "DECREMENT" };}; |
Javascript
// reducers/func.jsconst 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; |
Javascript
// Filenme - reducers/index.jsimport change from "./func";import { combineReducers } from "redux";const rootReducer = combineReducers({ change });export default rootReducer; |
Javascript
// Filename - store.jsimport { createStore } from "redux";import rootReducer from "./reducers/index";const store = createStore( rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());export default store; |
Javascript
// Filename - index.js /src directoryimport 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")); |
Step to run the application: Open the terminal and type the following command.
npm start
Output: Open the browser and our project is shown in the URL http://localhost:3000/
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. |
