logologo
  • AI Tools

    DB Query GeneratorMock InterviewResume BuilderLearning Path GeneratorCheatsheet GeneratorAgentic Prompt GeneratorCompany ResearchCover Letter Generator
  • XpertoAI
  • MVP Ready
  • Resources

    CertificationsTopicsExpertsCollectionsArticlesQuestionsVideosJobs
logologo

Elevate Your Coding with our comprehensive articles and niche collections.

Useful Links

  • Contact Us
  • Privacy Policy
  • Terms & Conditions
  • Refund & Cancellation
  • About Us

Resources

  • Xperto-AI
  • Certifications
  • Python
  • GenAI
  • Machine Learning

Interviews

  • DSA
  • System Design
  • Design Patterns
  • Frontend System Design
  • ReactJS

Procodebase © 2024. All rights reserved.

Level Up Your Skills with Xperto-AI

A multi-AI agent platform that helps you level up your development skills and ace your interview preparation to secure your dream job.

Launch Xperto-AI

Build a Context-Based State Management System in React

author
Generated by
Abhishek Goyan

14/09/2024

React

Sign in to read full article

React has revolutionized the way we build user interfaces, especially with its component-based architecture. However, as applications grow, managing state across various components can become substantially tricky. This is where context-based state management comes into play. Using the Context API, we can share state across our application without having to rely on prop drilling.

In this blog, we will build a simple context-based state management system, demonstrating how to manage global state in our React app smoothly.

Setting Up Our Application

To get started, let's set up a new React application. If you don't have create-react-app installed, you can do so by running:

npx create-react-app react-context-example cd react-context-example

Once created, navigate to the project folder.

Creating Our Context

Inside the src directory, let's create a new folder named context. Inside this folder, create a file named AppContext.js. This file will hold our context and the provider component that will wrap our application.

// src/context/AppContext.js import React, { createContext, useState } from 'react'; // Create a Context for the app export const AppContext = createContext(); // Create a Provider component export const AppProvider = ({ children }) => { const [state, setState] = useState({ user: null, theme: 'light', }); const login = (user) => { setState((prevState) => ({ ...prevState, user })); }; const logout = () => { setState((prevState) => ({ ...prevState, user: null })); }; const toggleTheme = () => { setState((prevState) => ({ ...prevState, theme: prevState.theme === 'light' ? 'dark' : 'light', })); }; return ( <AppContext.Provider value={{ state, login, logout, toggleTheme }}> {children} </AppContext.Provider> ); };

Breakdown of the Provider

  1. Creating the context: We use createContext to create a new context, which will hold our global state.
  2. Setting up the provider: The AppProvider component holds a piece of state using the useState hook. This state contains user and theme.
  3. Login and Logout functions: We define functions to modify the user state.
  4. Theme toggle: We present a function to toggle between light and dark themes.

Wrapping Our App with the Provider

Now that we have our context set up, we need to wrap our application with the AppProvider. Update the src/index.js file:

// src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import { AppProvider } from './context/AppContext'; ReactDOM.render( <React.StrictMode> <AppProvider> <App /> </AppProvider> </React.StrictMode>, document.getElementById('root') );

Consuming Context in Components

Now we can use the context in any component. Let's create a simple user component that can log in, log out, and toggle the theme.

First, create a new component called User.js inside the src directory:

// src/User.js import React, { useContext } from 'react'; import { AppContext } from './context/AppContext'; const User = () => { const { state, login, logout, toggleTheme } = useContext(AppContext); return ( <div style={{ background: state.theme === 'dark' ? '#333' : '#fff', color: state.theme === 'dark' ? '#fff' : '#000' }}> <h1>{state.user ? `Hello, ${state.user}` : 'Please, log in.'}</h1> <button onClick={() => (state.user ? logout() : login('John'))}> {state.user ? 'Logout' : 'Login'} </button> <button onClick={toggleTheme}>Toggle Theme</button> </div> ); }; export default User;

Breakdown of the User Component

  1. Context consumption: We use useContext to consume our AppContext.
  2. Dynamic rendering: We dynamically change the heading and button based on the user's log-in state.
  3. Styling based on theme: The background and text color change based on the theme state.

Next Steps

Finally, we need to incorporate our User component into the main App.js:

// src/App.js import React from 'react'; import User from './User'; const App = () => { return ( <div className="App"> <User /> </div> ); }; export default App;

Now save your changes and run your app using npm start. You should see a simple interface that allows you to log in and out, as well as toggle between light and dark themes.

With this setup, you have a fully functional context-based state management system using React's Context API. This method is light on overhead and provides a clear structure for managing and distributing state throughout your components. Whether you're building a small single-page app or a more complex enterprise solution, this technique is a fantastic way to keep your state organized and maintainable.

Popular Tags

ReactState ManagementContext API

Share now!

Like & Bookmark!

Related Collections

  • React Interview Challenges: Essential Coding Problems

    14/09/2024 | ReactJS

  • Mastering React Concepts

    24/08/2024 | ReactJS

Related Articles

  • Exploring useLayoutEffect vs useEffect in React

    21/07/2024 | ReactJS

  • Creating Metadata Driven Tree Structure in React JS

    12/09/2024 | ReactJS

  • Getting Started with React Storybook and Cypress

    03/09/2024 | ReactJS

  • Managing Side Effects in React with useEffect

    24/08/2024 | ReactJS

  • Performance Optimization in React: Techniques and Best Practices

    24/08/2024 | ReactJS

  • Build a Custom Modal Component in React

    14/09/2024 | ReactJS

  • Understanding React Context

    13/07/2024 | ReactJS

Popular Category

  • Python
  • Generative AI
  • Machine Learning
  • ReactJS
  • System Design