Understanding React Context with a Task Management App

React Context provides a way to share values like state and dispatch across the component tree without prop drilling. In this article, we'll walk through implementing React Context in a Task Management App to manage tasks efficiently.

---

Why React Context?

Prop drilling is a common problem when passing props through multiple layers of components. React Context helps solve this by allowing you to define a global state that any component can access directly.

---

Our Project: Task Management App

We'll build a simple Task Management App where users can:

• Add tasks
• Edit tasks
• Mark tasks as complete/incomplete
• Delete tasks

Let's dive into the implementation.

---

Setting Up Context

First, create a context to manage our tasks.

Define the Task Type and Context

In TaskContext.tsx, define the TaskType, initial state, and context setup.

import React, { createContext, useReducer, PropsWithChildren } from "react";

export interface TaskType {
    id: number;
    text: string;
    done: boolean;
}

type Action =
    | { type: "added"; id: number; text: string }
    | { type: "changed"; task: TaskType }
    | { type: "deleted"; id: number };

interface TaskContextType {
    tasks: TaskType[];
    dispatch: React.Dispatch<Action>;
}

const initialState: TaskType[] = [];

const TaskContext = createContext<TaskContextType | undefined>(undefined);

function taskReducer(tasks: TaskType[], action: Action): TaskType[] {
    switch (action.type) {
        case "added":
            return [...tasks, { id: action.id, text: action.text, done: false }];
        case "changed":
            return tasks.map((task) =>
                task.id === action.task.id ? action.task : task
            );
        case "deleted":
            return tasks.filter((task) => task.id !== action.id);
        default:
            throw new Error(`Unhandled action type: ${action.type}`);
    }
}

export function TaskProvider({ children }: PropsWithChildren) {
    const [tasks, dispatch] = useReducer(taskReducer, initialState);

    return (
        <TaskContext.Provider value={{ tasks, dispatch }}>
            {children}
        </TaskContext.Provider>
    );
}

export function useTaskContext() {
    const context = React.useContext(TaskContext);
    if (!context) {
        throw new Error("useTaskContext must be used within a TaskProvider");
    }
    return context;
}

---

 Using Context in Components

Now that the context is ready, let’s use it in our app.

Add Task Component

import React, { useState } from "react";
import { useTaskContext } from "./TaskContext";

export function AddTask() {
    const { dispatch } = useTaskContext();
    const [text, setText] = useState("");

    const handleAddTask = () => {
        if (text.trim()) {
            dispatch({ type: "added", id: Date.now(), text });
            setText(""); // Clear the input
        }
    };

    return (
        <div>
            <input
                type="text"
                value={text}
                onChange={(e) => setText(e.target.value)}
                placeholder="Add a new task"
            />
            <button onClick={handleAddTask}>Add Task</button>
        </div>
    );
}

Task Component

import React, { useState } from "react";
import { TaskType, useTaskContext } from "./TaskContext";

interface TaskProps {
    task: TaskType;
}

export function Task({ task }: TaskProps) {
    const { dispatch } = useTaskContext();
    const [isEditing, setIsEditing] = useState(false);
    const [editText, setEditText] = useState(task.text);

    const handleSave = () => {
        dispatch({ type: "changed", task: { ...task, text: editText } });
        setIsEditing(false);
    };

    return (
        <div>
            <input
                type="checkbox"
                checked={task.done}
                onChange={() =>
                    dispatch({
                        type: "changed",
                        task: { ...task, done: !task.done },
                    })
                }
            />
            {isEditing ? (
                <>
                    <input
                        value={editText}
                        onChange={(e) => setEditText(e.target.value)}
                    />
                    <button onClick={handleSave}>Save</button>
                </>
            ) : (
                <>
                    {task.text}
                    <button onClick={() => setIsEditing(true)}>Edit</button>
                </>
            )}
            <button onClick={() => dispatch({ type: "deleted", id: task.id })}>
                Delete
            </button>
        </div>
    );
}

---

Integrating Components

Finally, bring everything together in App.tsx.

import React from "react";
import { TaskProvider } from "./TaskContext";
import { AddTask } from "./AddTask";
import { Task } from "./Task";

export default function App() {
    return (
        <TaskProvider>
            <h1>Task Management App</h1>
            <AddTask />
            {/* Use the context to map tasks */}
            <TaskList />
        </TaskProvider>
    );
}

function TaskList() {
    const { tasks } = useTaskContext();

    return (
        <div>
            {tasks.map((task) => (
                <Task key={task.id} task={task} />
            ))}
        </div>
    );
}

---

Conclusion

By using React Context, we eliminated the need for prop drilling in our Task Management App. The TaskProvider encapsulates state management and can easily be expanded for more features.

This structure is scalable, maintainable, and ensures clean separation of concerns. React Context combined with useReducer is a powerful pattern for managing global state in React apps.