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:

how to properly handle rejected promises in TypeScript

How to properly handle rejected promises in TypeScript

Learn how to properly handle rejected promises in TypeScript using Angular, with tips for retry logic, typed results, and avoiding unhandled exceptions.

Lewis Cianci
Jun 26, 2025 â‹… 4 min read
Your AI Has Agency — Here’s How To Architect Its Frontend

Your AI has agency — here’s how to architect its frontend

AI’s not just following orders anymore. If you’re building the frontend, here’s how to design interfaces that actually understand your agent’s smarts.

Rosario De Chiara
Jun 25, 2025 â‹… 5 min read
how to design apps with Apple Intelligence in mind

How to design apps with Apple Intelligence in mind

Apple Intelligence is here. What does it mean for frontend dev and UX? Explore the core features of the update, do’s and don’ts for designing with Apple Intelligence in mind, and reflect on the future of AI design.

Murat YĂĽksel
Jun 24, 2025 â‹… 10 min read
How To Optimize Your Next.js App With After()

How to optimize your Next.js app with after()

Next.js’ after() is a new API that lets you run logic after your route has finished rendering, without blocking the client.

Temitope Oyedele
Jun 24, 2025 â‹… 11 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