2025-02-17
3735
#react
Adebiyi Adedotun
20310
Feb 17, 2025 â‹… 13 min read

React Context tutorial: Complete guide with practical examples

Adebiyi Adedotun Caught in the web, breaking things and learning fast.

Recent posts:

tanstack table react table

A complete guide to TanStack Table (formerly React Table)

Discover how to use TanStack Table, formerly known as React Table, to build a table UI for a variety of use cases.

Paramanantham Harrison
Mar 28, 2025 â‹… 14 min read
javascript object prototypes

JavaScript prototypes: How objects inherit properties and methods

Explore what prototypes are, how the prototype chain works, and how to use the prototype chain to create inheritance between objects.

Ibadehin Mojeed
Mar 28, 2025 â‹… 7 min read
set up Node.js with TypeScript and Express

How to set up TypeScript with Node.js and Express

Set up TypeScript with Node.js and Express, focusing on configuring key elements for a smooth development experience.

Aman Mittal
Mar 28, 2025 â‹… 9 min read
featured image tsx extension

What is the difference between a .ts and .tsx file extension?

Examine the differences between the .ts and .tsx file types, their use cases, and best practices for a React TypeScript project.

Hussain Arif
Mar 27, 2025 â‹… 8 min read
View all posts

11 Replies to "React Context tutorial: Complete guide with practical examples"

  1. What am I doing wrong? When I try, I get this error “Objects are not valid as a React child (found: object with keys…” Using react Version 17.x

    “`
    function UserProvider({children}) {
    const value = useState({
    name: ‘Guest’,
    email: false,
    is_logged_in: false,
    is_admin: false
    });

    return {children}
    }
    “`

  2. Great article! I’ve considered using context for form validation (i.e. validation errors from the server) so that all children (inputs) of a form can show validation errors without passing the errors array to each input. Redux (or similar) isn’t really appropriate here since there can be multiple forms on a page (at least we’ll need to identify each) and that validation errors are only relevant for descendants.

  3. Hi, In the Profile() method, how do I set the username? setUserDetails({username: “known-user”}) doesn’t seem to work.

  4. Traditionally, this is the case for all the reasons mentioned. Though you can try @webkrafters/react-observable-context on npm. It removes many of the redux and react context bottlenecks while making it easier to reuse your components.

  5. Also, instead of having two different contexts for passing down a value and setting the value, you can have this in one function and pass the value as an object containing the actual value and function which will update the value. For example, in your example:
    “`
    import React, { createContext, useState } from “react”;

    const UserContext = createContext(undefined);
    const UserDispatchContext = createContext(undefined);

    function UserProvider({ children }) {
    const [userDetails, setUserDetails] = useState({
    username: “John Doe”
    });

    return (

    {children}

    );
    }
    “`

    we can have this as:

    “`
    import React, { createContext, useState } from “react”;

    const UserContext = createContext(undefined);

    function UserProvider({ children }) {
    const [userDetails, setUserDetails] = useState({
    username: “John Doe”
    });

    return (

    {children}

    );
    }
    “`

    then in the component that uses this prop, obtain the values as:

    “`
    const {userDetails, setUserDetails} = useContext(UserContext);
    “`

Leave a Reply