What is the React Context API?

Last Updated : 10 Oct, 2024

In the React ecosystem, as your application grows, passing data down through component hierarchies can become cumbersome. This is where the Context API steps in, providing a centralized way to manage state across components.

Table of Content

What is the Context API?

At its core, the Context API is a mechanism that allows you to share specific information (like state or functions) with multiple components, eliminating the need for prop drilling.

The React Context API is a powerful tool for efficient state management, offering a cleaner alternative to prop drilling and enhancing overall code organization.

How Context API Works:

1. Creating a Context

The process begins by creating a context using the createContext() method. This serves as a blueprint for the shared data.

JavaScript

/ Creating a context const MyContext = React.createContext();

2. Providing the Context

The context provider, wrapped around components requiring access to shared data, is established using the Provider

JavaScript

// Providing the context value function MyApp() {   return (     <MyContext.Provider value={/* your shared value */}>       {/* Components that can access the context value */}     </MyContext.Provider>   ); }

3. Consuming the Context

JavaScript

function AnotherComponent() {   const contextValue = React.useContext(MyContext);    // Now, contextValue contains the shared value }

Components nested within the provider can consume the shared data using the useContext hook or the Consumer component.

Steps to Create a Simple To-Do List with React Context API:

Let's create a straightforward project - a to-do list application using React and the Context API. This project will showcase how the Context API can simplify state management in a real-world scenario.

Step 1: Start by creating a new React app using Create React App.

npx create-react-app todo-list-context

Step 2: Navigate to the root directry of project using the following the command.

cd todo-list-context

Project Structure:

Screenshot-from-2024-02-04-13-10-15 — Project Structure of todo list

package.json

 "dependencies": {
    "@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-scripts": "5.0.1",
    "redux": "^5.0.1",
    "web-vitals": "^2.1.4"
}

In your src/index.js, wrap your App component with the TodoProvider.
Now src/components/TodoForm.js , let's create components to interact with the to-do list.
Now its turn for src/components/TodoList.js
Now, in your src/App.js, use the TodoForm and TodoList components.

JavaScript

// TodoContext.js import React, { createContext, useState }     from 'react'; const TodoContext = createContext(); const TodoProvider = ({ children }) => {     const [todos, setTodos] = useState([]);     const addTodo = (text) => {         setTodos([...todos, { text, id: Date.now() }]);     };     const removeTodo = (id) => {         setTodos(todos.filter((todo) => todo.id !== id));     };     return (         <TodoContext.Provider value={{             todos,             addTodo, removeTodo         }}>             {children}         </TodoContext.Provider>     ); }; export { TodoProvider, TodoContext };

JavaScript

// index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { TodoProvider } from './TodoContext'; ReactDOM.render(   <React.StrictMode>     <TodoProvider>       <App />     </TodoProvider>   </React.StrictMode>,   document.getElementById('root') );

JavaScript

// TodoForm.js import React, { useState, useContext } from 'react'; import { TodoContext } from './TodoContext'; const TodoForm = () => {     const { addTodo } = useContext(TodoContext);     const [text, setText] = useState('');     const handleSubmit = (e) => {         e.preventDefault();         addTodo(text);         setText('');     };     return (         <form onSubmit={handleSubmit}>             <input                 type="text"                 value={text}                 onChange={(e) => setText(e.target.value)}                 placeholder="Add a new todo"             />             <button type="submit">Add Todo</button>         </form>     ); }; export default TodoForm;

JavaScript

// TodoList.js import React, { useContext } from 'react'; import { TodoContext } from './TodoContext'; const TodoList = () => {     const { todos, removeTodo } = useContext(TodoContext);     return (         <ul>             {todos.map((todo) => (                 <li key={todo.id}>                     {todo.text}                     <button onClick={() =>                         removeTodo(todo.id)}>Remove</button>                 </li>             ))}         </ul>     ); }; export default TodoList;

JavaScript

// App.js import React from 'react'; import TodoForm from './TodoForm'; import TodoList from './TodoList';  const App = () => {   return (     <div>       <h1>My Todo List</h1>       <TodoForm />       <TodoList />     </div>   ); }; export default App;

Start your application using the following command.

npm start

Output:

Screenshot-from-2024-02-04-13-07-33 — todo list app

Context in React

isandeep2183

Improve

Article Tags :

What is the React Context API?

What is the Context API?

How Context API Works:

1. Creating a Context

2. Providing the Context

3. Consuming the Context

Steps to Create a Simple To-Do List with React Context API:

Project Structure:

package.json

Similar Reads