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:

I Tried Shadcn CLI 3.0 — Here’s What I Learned

I tried Shadcn CLI 3.0 — here’s what I learned

Shadcn CLI 3.0 takes component management to a new level. With namespaced registries, private access, and AI-powered discovery, it’s now faster and smarter to build React UIs.

Emmanuel John
Oct 17, 2025 ⋅ 6 min read

Why is Zod so slow?

Zod’s flexibility comes at a cost. This article breaks down why Zod is slower than AOT-compiled validators like Typia, and how to fix it with a build-time optimization that brings production-grade performance.

Ikeh Akinyemi
Oct 16, 2025 ⋅ 5 min read
the replay oct 15 graphic

The Replay (10/15/25): AI’s accessibility problem, React 19.2, and more

Discover what’s new in The Replay, LogRocket’s newsletter for dev and engineering leaders, in the October 15th issue.

Matt MacCormack
Oct 15, 2025 ⋅ 34 sec read
AI has an accessibility problem: What devs can do about it

AI has an accessibility problem: What devs can do about it

Jemima Abu examines where AI falls short on accessibility and how we can best harness AI while still building products that everyone can use.

Jemima Abu
Oct 15, 2025 ⋅ 10 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