Home/ Questions/Q 430
Next
In Process

DevzConnect Latest Questions

nicko
  • 0
  • 0
Beginner
Asked: 2025-02-20T01:49:02+00:00 In:

What is the difference between Redux and Context API?

  • 0
  • 0

An explanation of Redux vs Context API.

beginnerinterviewquestionsreactreactjs
Share
Leave an answer

Leave an answer

Browse

1 Answer

  1. Sarah Thompson
    Beginner

    Redux vs. Context API in React

    Both Redux and React Context API help manage state in React apps, but they serve different purposes and scales.

    📊 High-Level Comparison

    Feature Redux Context API
    Purpose Global state management with advanced features Prop drilling avoidance & simple global state
    State Management Uses centralized store Uses React’s built-in Context
    Boilerplate More setup (actions, reducers, store) Minimal setup
    Performance Optimized for large-scale apps Can cause unnecessary re-renders
    DevTools Support Powerful Redux DevTools No built-in DevTools
    Middleware Supports (e.g., Redux Thunk, Redux Saga) No native middleware
    Best For Large, complex applications Small to medium apps with simple state needs

    🛠️ Context API Example

    Good for lightweight global state needs (e.g., theme toggling, user authentication)

    import React, { createContext, useContext, useState } from 'react';

// 1️⃣ Create Context
const ThemeContext = createContext();

const App = () => {
const [darkMode, setDarkMode] = useState(false);

return (
// 2️⃣ Provide Context
<ThemeContext.Provider value={{ darkMode, setDarkMode }}>
<Header />
</ThemeContext.Provider>
);
};

const Header = () => <ThemeToggle />;

const ThemeToggle = () => {
// 3️⃣ Consume Context
const { darkMode, setDarkMode } = useContext(ThemeContext);

return (
<button onClick={() => setDarkMode(!darkMode)}>
{darkMode ? 'Switch to Light Mode 🌞' : 'Switch to Dark Mode 🌙'}
</button>
);
};

export default App;

    ⚡ Key Points:

    • Minimal setup.
    • Great for non-frequent updates.
    • Performance issues may arise if used for rapidly changing states (e.g., real-time data).

    🛠️ Redux Example

    Ideal for complex applications with multiple slices of state and advanced needs.

    1️⃣ Install Redux Toolkit & React-Redux:

    npm install @reduxjs/toolkit react-redux

    2️⃣ Create a Redux Store:

    // store.js
import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => { state.value += 1; },
decrement: (state) => { state.value -= 1; },
},
});

export const { increment, decrement } = counterSlice.actions;

export const store = configureStore({
reducer: {
counter: counterSlice.reducer,
},
});

    3️⃣ Connect Redux to React:

    // App.js
import React from 'react';
import { Provider, useDispatch, useSelector } from 'react-redux';
import { store, increment, decrement } from './store';

const Counter = () => {
const count = useSelector((state) => state.counter.value);
const dispatch = useDispatch();

return (
<div>
<h1>Count: {count}</h1>
<button onClick={() => dispatch(increment())}>➕ Increment</button>
<button onClick={() => dispatch(decrement())}>➖ Decrement</button>
</div>
);
};

const App = () => (
<Provider store={store}>
<Counter />
</Provider>
);

export default App;

    ⚡ Key Points:

    • Centralized store holds app-wide state.
    • Reducers handle logic for state changes.
    • Optimized with Redux Toolkit for less boilerplate.

    🚀 When to Use Context API?

    • ✅ Small to medium apps.
    • ✅ Non-frequently updated global state (e.g., theme, user info).
    • ✅ Avoids prop drilling without extra dependencies.

    🚀 When to Use Redux?

    • ✅ Large, complex apps.
    • ✅ Apps with frequent state updates or deeply nested components.
    • ✅ When you need middleware, time-travel debugging, or complex state logic.

    ⚡ Pro Tip:

    • Redux Toolkit has streamlined Redux, making it almost as simple as Context API but with better performance for large-scale apps.
    • If your app is simple, go with Context API. If it’s complex or growing fast, go with Redux.