Home/ Questions/Q 466
Next
In Process

DevzConnect Latest Questions

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

What is the difference between useContext and Redux?

  • 0
  • 0

An explanation of useContext vs Redux.

beginnerinterviewquestionsreactreactjs
Share
Leave an answer

Leave an answer

Browse

1 Answer

  1. Amelia Edwards

    What is useContext?

    useContext is a React Hook that allows you to access data from a React Context without passing props down manually at every level of your component tree. Context is useful for sharing data (like themes, user authentication, or language preferences) across many components.

    What is Redux?

    Redux is a state management library for JavaScript applications. It provides a centralized store to manage the state of your entire application. Redux is often used in larger applications where state needs to be shared across many components, and it provides tools for debugging, middleware, and predictable state updates.

    Key Differences

    Feature useContext Redux
    Purpose Share data across components Manage global state in large apps
    Complexity Simple and lightweight More complex, requires setup
    State Updates Re-renders all consumers on change Optimized re-renders with selectors
    Middleware Not built-in Supports middleware (e.g., Thunk)
    Debugging No built-in tools DevTools for time-travel debugging
    Learning Curve Easy for beginners Steeper learning curve

    When to Use Which?

    • Use useContext:
      • For small to medium apps.
      • When you need to share simple data (e.g., themes, user preferences).
      • When you want to avoid the complexity of Redux.
    • Use Redux:
      • For large apps with complex state management.
      • When you need advanced features like middleware, time-travel debugging, or persistent state.

    Example: Using useContext

    Step 1: Create a Context

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

// Create a Context
const ThemeContext = createContext();

// Create a Provider Component
const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export { ThemeContext, ThemeProvider };

    Step 2: Use the Context in Components

    import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const ThemedButton = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button
      onClick={toggleTheme}
      style={{
        backgroundColor: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#000' : '#fff',
      }}
    >
      Toggle Theme
    </button>
  );
};

export default ThemedButton;

    Step 3: Wrap Your App with the Provider

    import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from './ThemeContext';
import ThemedButton from './ThemedButton';

function App() {
  return (
    <ThemeProvider>
      <ThemedButton />
    </ThemeProvider>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

    Example: Using Redux

    Step 1: Install Redux

    npm install @reduxjs/toolkit react-redux

    Step 2: Create a Slice

    import { createSlice } from ‘@reduxjs/toolkit’;
    const themeSlice = createSlice({
  name: 'theme',
  initialState: 'light',
  reducers: {
    toggleTheme: (state) => (state === 'light' ? 'dark' : 'light'),
  },
});

export const { toggleTheme } = themeSlice.actions;
export default themeSlice.reducer;

    Step 3: Create a Store

    import { configureStore } from '@reduxjs/toolkit';
import themeReducer from './themeSlice';

const store = configureStore({
  reducer: {
    theme: themeReducer,
  },
});

export default store;

    Step 4: Wrap Your App with the Provider

    import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import ThemedButton from './ThemedButton';

function App() {
  return (
    <Provider store={store}>
      <ThemedButton />
    </Provider>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

    Step 5: Use Redux in Components

    import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { toggleTheme } from './themeSlice';

const ThemedButton = () => {
  const theme = useSelector((state) => state.theme);
  const dispatch = useDispatch();

  return (
    <button
      onClick={() => dispatch(toggleTheme())}
      style={{
        backgroundColor: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#000' : '#fff',
      }}
    >
      Toggle Theme
    </button>
  );
};

export default ThemedButton;

    Summary

    • useContext:
      • Simple and lightweight.
      • Best for small to medium apps or sharing simple data.
      • No need for additional libraries.
    • Redux:
      • Powerful and scalable.
      • Best for large apps with complex state management.
      • Requires setup but offers advanced features.

    Both tools are great, but the choice depends on your app’s complexity and your team’s familiarity with state management. For beginners, start with useContext and move to Redux as your app grows