Context

/

Introduction

      import React, { render } from 'react';

function UserInfo({ user }: { user: User }) {
  return <span>{user.name} / {user.uid}</span>
}

function UserPosts({ user }: { user?: User }) {
  return <ul>
    {user.posts.map(i => (
       <li key={i.id}>{i.title}</li>
    ))}
  </ul>
}

function UserDetails({ user }) {
  return (
    <>
      <UserInfo user={user} />
      <UserPosts user={user} />
    </>           
  )
}

export default function App() {
  const user = {
      name: "Tomas",
      uid: 1,
      posts: [
        { id: 1, title: "Post 1" },
        { id: 2, title: "Post 2" },
      ]
  }
  return (
    <UserDetails user={user} />
  );
}

render(<App />)

      body { 
    padding: 16px;  
    font-size: 24px;
}

h1 {
    font-size: 32px;
}

Context

/

Introduction

      import React, { createContext, useContext, useState, render } from 'react';

type Post = {
  id: number;
  title: string;
}

type UserContextType = {
  user: {
    uid: number;
    name: string;
    posts: Post[];
  }
}

// Step 1: Create a Context
const UserContext = 
  createContext<UserContextType | null>(null);

function UserInfo() {
  // Step 3: Consume context
  const { user } = useContext(UserContext);

  return <span>{user.name} / {user.uid}</span>
}

function UserPosts() {
  // Step 3: Consume context
  const { user } = useContext(UserContext);

  return <ul>
    {user.posts.map(i => (
       <li key={i.id}>{i.title}</li>
    ))}
  </ul>
}

function UserDetails() {
  return (
    <>
      <UserInfo />
      <UserPosts />
    </>           
  )
}

export default function App() {
  const user = {
      name: "Tomas",
      uid: 1,
      posts: [
        { id: 1, title: "Post 1" },
        { id: 2, title: "Post 2" },
      ]
  }
  // Step 2: Provide Context
  return (
    <UserContext.Provider value={{ user }}>
      <UserDetails />
    </UserContext.Provider>
  );
}

render(<App />);

      body { 
    padding: 16px;  
    font-size: 24px;
}

h1 {
    font-size: 32px;
}

First, let's import createContext and useContext from react.
Then, for type safety, we define the shape of data stored in the context. In our case, we will store a user property with user details.
Then, we create the context, using the createContext function and provide the default value. This value will be used in case you forget to wrap your component with the context provider. Let's do that now!
First, we initialise the user data ...
... and then we add the UserContext provider with the current user value. From now on, we can access the user value in any of the child components at any level of the hierarchy under the UserContext provider.
We access the value using the useContext hook, providing the type of the context we want to access. Note that we no longer need the user prop as we access the user from the context.
Similarly, we access the user from the context in the UserPosts component. Pretty handy right? Let's add some more functionality and simplify our example.

Context

/

Simplifying Context

      import React, { createContext, useContext, useState, render } from 'react';

type Post = {
  id: number;
  title: string;
}

type UserContextType = {
  login(user: string, password: string),
  logout(),
  user: {
    uid: number;
    name: string;
    posts: Post[];
  } | null
}

// Step 1: Create a Context
const UserContext = 
  createContext<UserContextType | null>(null);

// Step 2: Create custom hook
const useUser = () => {
  return useContext(UserContext);
};

function UserInfo() {
  // Step 3: Consume context
  const { user } = useUser();
  return <span>{user.name} / {user.uid}</span>
}

function UserPosts() {
  // Step 3: Consume context
  const { user } = useUser();

  return <ul>
    {user.posts.map(i => (
       <li key={i.id}>{i.title}</li>
    ))}
  </ul>
}

function UserDetails() {
  const { user } = useUser();
  if (!user) {
    return <div>Not logged in!</div>
  }

  return (
    <>
      <UserInfo />
      <UserPosts />
    </>           
  )
}

function UserProvider({ children }) {
  const [user, setUser] = useState<User | null>(null);

  return (
    <UserContext.Provider value={{
      user,
      async login() {
        // do some login functionality
        setUser({
          name: "Tomas",
          uid: 1,
          posts: [
            { id: 1, title: "Post 1" },
            { id: 2, title: "Post 2" },
          ]
        })
      },
      async logout() {
        setUser(null);
      }}
    }>
      {children}
    </UserContext.Provider>
  )
}

function LoginForm() {
  const { user, login, logout } = useUser();
  return (
    <div>
      { user 
        ? <button onClick={logout}>Logout</button> 
        : <button onClick={login}>Login</button>}
    </div>
  )
}

export default function App() {
  return (
    <UserProvider>
      <LoginForm />
      <UserDetails />
    </UserProvider>
  );
}

render(<App />);

      body { 
    padding: 16px;  
    font-size: 24px;
}

h1 {
    font-size: 32px;
}

First thing we simplify is the use of the context with a custom hook.
With this custom hook, we no longer need to remember or import the type of the context. We can conveniently export it from a utility class and import it whenever needed.
Next, we will add the login and logout functionality, and add this function into our context, since login will replace the current user and logout will remove the user from the context.
This is our second simplification, where we create a custom component handling our User Context.
First, there is a user state variable holding the current user value.
Then, this component returns a UserContext provider with ...
... the current user or null if user is not logged in ...
... the login functionality, in our case just hard coding the current user.
... the logout functionality removing the current user
... and also making sure we render all children provided to this Context provider.
We also add a new login form that takes advantage of the new login and logout functions and renders either a login or logout button based on whether the user is logged in or out.
Last, we make sure to use our new UserProvider component with a new LoginForm child.
When we run this example, we can see that login in and out of the application works correctly, propagating the user value through context into all child components. This approach is scalable, clean, and ideal for managing global state in React applications.

Full Stack Development

Context

Context

Introduction

Context

Introduction

Context

Simplifying Context