React context - freeCodeCamp.org

How to Use React's Context API – Tutorial with Examples

Danny — Mon, 22 Jul 2024 15:25:40 +0000

In React, data is typically passed down from parent to child via props. But this can lead to "prop drilling" – where we have to pass props down through lots of components to get them where they're needed.

Also, some props (for example, the current authenticated user, UI theme, or preferred language) will be required by many components within an application.

React's Context API provides a way to share values like these between components without having to explicitly pass them down as a prop through every level of the tree. So, Context is designed to share data that can be considered "global" for a tree of React components.

What You'll Learn in This Article

What is the React Context API and when should you use it?
React Context API example: how to switch between light and dark mode UI themes
How to create multiple React Contexts (and why you should)
How to prevent the React Context re-render issue
React Context API vs Redux for global state management

Source Code

All examples from this article are in this repo: https://github.com/DoableDanny/React-context-API-tutorial

I also made a video version of this article to make it easier for you to follow along with the examples: React Context Tutorial with Examples

What is the React Context API and When Should You Use It?

The Context API is a feature in React that provides a way to share values like themes, user information, or configuration settings between components without having to explicitly pass props through every level of the component tree. This makes it particularly useful for managing global state, or state that is needed by many components at different nesting levels.

The Context API is a part of the React library, meaning that you don't need to install it as a third-party package in a React application.

So, the Context API can be used for sharing global variables between components in a React app, without having to pass these variables as props down the component tree. This is especially useful if there are components that are deeply nested that need access to variables from higher up components.

Now, let's learn how the Context API works by going through a common use case example for the Context API...

React Context API Example — Light and Dark Mode UI Theme

A very common real-world usecase for the React Context API is for storing the current user's prefered theme – that is, "light mode" or "dark mode".

Think about it: many of the UI components in a React app will need to know about the current theme, in order to display the approprate styles. Buttons, Headings, the Navbar, the Footer, Dropdowns – lots of components are going to need to display themselves differently depending on the current theme.

The passing-down-a-prop solution

The most simple and obvious "React" way to solve this would be to create a theme variable in the main top-level App component, and then keep on passing it down as a prop to all of the components in the tree. But this leads to a React problem known as "prop drilling".

Prop drilling is a term used in React to describe the process of passing data from a parent component to a deeply nested child component through multiple intermediary components. This can happen when you need to pass state or functions several levels down the component tree.

Prop drilling example:


function App() {
  const theme = 'dark';
  return <Parent theme={theme} />;
}

function Parent({ theme }) {
  return <Child theme={theme} />;
}

function Child({ theme }) {
  return <Button theme={theme} />;
}

function Button({ theme }) {
  return <button style={{ background: theme === 'dark' ? 'black' : 'white' }}>Click mebutton>;
}

As you can see, each intermediary component needs to include the prop, even if it doesn't use it, just to pass it down further. This clutters the code and makes it more difficult to understand.

Also, intermediary components that do not use the props might still re-render when the props change, leading to performance issues. This can be particularly problematic in large applications with deep component trees.

Context API To The Rescue

We can solve this prop drilling issue by using the Context API.

Creating a context

First, we need to create the context, and pass in the light theme as the default value:

// src/contexts/ThemeContext.js

import { createContext } from "react";

export const themes = {
  light: {
    background: "white",
    text: "black",
  },
  dark: {
    background: "black",
    text: "white",
  },
};

export const ThemeContext = createContext(themes.light);

Above, we have created a contexts folder inside of our src folder for storing all of our contexts. It's considered good practice to create each context in its own file. In our case, we just need to create a context for storing the current theme.

Notice that contexts are created by calling the createContext() function that comes from the React library. We pass the createContext() function a default value of themes.light.

Providing a context

Next, we need to wrap all of the components that need access to the theme in a context provider. The context provider takes a value prop, where we can pass the value that we want to make global.

Below, and

How to Use React Context in Your Project – Beginner's Guide

Benedicta Onyebuchi — Fri, 05 Jan 2024 20:06:06 +0000

As beginners, managing state in React applications can be challenging, especially when passing and utilizing props in deeply nested components.

The usual way of passing information from a main component to its smaller parts — like a parent passing data to a child, then to a grandchild — can get complicated and tiring, especially when we need to access something deep down in the hierarchy.

In this article, we'll explore how the React Context API works, its use cases and a sample project utilizing the concept.

What is React Context?

React Context provides us a way to pass data down through the component tree to where we need it without having to manually pass props at every single level.

It acts as a global storage space for all your components in your project.

How is React Context Different from Prop Threading?

In prop threading, data is passed down from the parent component to the child component. If a child of that component needs the same prop, it is passed down until the required component gets the data.

While simple, it can become complex when traversing deeply nested structures, and this results in prop drilling.

A pictural representation of prop threading

In contrast, React Context allows data to be passed from the parent component to any nested component that requires it, simplifying the process.

A representation of React context.

What is Prop Drilling?

Prop drilling refers to a situation where this threading of props becomes complicated due to the need to pass them through multiple layers of components.

As the data is passed down through many layers, each intermediate component needs to receive and pass the data, even if it doesn't use the data itself.

Here's an example:

// App.js

import React, { useState } from 'react';

const GrandchildComponent = ({ dataFromChild }) => {
  return (
    <div>
      <p>Username in Grandchild: {dataFromChild.username}p>
    div>
  );
};

const ChildComponent = ({ dataFromParent }) => {
  return (
    <div>
      <p>Your email: {dataFromParent.email}p>
      <GrandchildComponent dataFromChild={dataFromParent} />
    div>
  );
};

const ParentComponent = () => {
  const [userData, setUserData] = useState({
    username: 'benny_dicta',
    email: 'benedictaonyebuchi@gmail.com',
  });

  return (
    <div>
      <h1>Welcome, {userData.username}!h1>
      <ChildComponent dataFromParent={userData} />
    div>
  );
};

const App = () => {
  return <ParentComponent />;
};

export default App;

The code above shows a typical case of prop drilling where data is passed from the ParentComponent to the GrandChild component even when they are not needed by that component.

ParentComponent is the top-level component that holds some data (userData).
ChildComponent is a child of ParentComponent and receives dataFromParent as a prop. It also renders a GrandChildComponent, passing the received prop further down.
GrandChildComponent is deeply nested and receives the prop dataFromChild. It renders the data in its UI.

A representation of a simple project structure

When to choose React Context

For simple and straightforward projects, prop threading would be adequate.
For complex projects requiring data to traverse multiple nested layers, React Context provides a cleaner solution.

A representation of a deeply nested application

The pictural difference between both approaches can be seen here.

A pictural representation of the difference between react context and prop drilling.

What are the Use Cases for React Context API?

Here are some of the use cases for React Context:

When prop drilling becomes complicated: Imagine having to pass a prop through multiple layers of components just to reach the one that needs it. Context API eliminates this prop-drilling headache.
Global data requirement: When multiple components need access to the same data (for example: user authentication status, theme preferences, and so on), using context makes it accessible without redundant prop passing.
Themable components: If your application requires changing themes, like light and dark modes, and you want components deep in the tree to adapt dynamically to theme changes, Context API makes this seamless.
Multi-level nesting: In deeply nested component trees, passing props down the hierarchy becomes impractical. Context provides a cleaner solution for sharing data across various levels.

How to use React Context API

Step #1 - Create a Context

import { createContext } from 'react';

const MyContext = createContext();
export default MyContext;

Step #2 - Wrap your App with Context Provider

import React from 'react';
import MyContext from './MyContext';

const App = () => {
  const sharedValue = 'This is a shared value';

  return (
    <MyContext.Provider value={sharedValue}>
      {/* Your components go here */}
    MyContext.Provider>
  );
};

export default App;

Step #3 - Consume the Context in Components

import React, { useContext } from 'react';
import MyContext from './MyContext';

const MyComponent = () => {
  const sharedValue = useContext(MyContext);

  return <p>{sharedValue}p>;
};

export default MyComponent;

The three Important Parts of the React Context API.

In this section, we'll talk about the three important parts of the React Context API: Provide, Context, and Consumer.

Provider

This is a component that is used to wrap components in order to access to the context's value. This is where you pass the values that you want to share throughout the component tree using the value prop.

import React from 'react';
import MyContext from './MyContext';

const App = () => {
  const sharedValue = 'This is a shared value';

  return (
    <MyContext.Provider value={sharedValue}>
     {children} {/*all components in its subtree*/}
    MyContext.Provider>
  );
};

export default App;

In the code above, the context is imported and the .Provider appended to the context, MyContext. This makes the prop passed to the Provider available to all of its children. That is, the components in its subtree.

Context

This acts as the storage where the data is stored. It comes with two parts:

createContext() — This creates the global object and creates the context.
useContext() — This consumes the information made available by the provider.

/*MyComponent.js*/

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

export const MyContext = createContext();

const MyComponent = () => {
  const sharedValue = useContext(MyContext);

  return <p>{sharedValue}p>;
};

export default MyComponent;

In the code above, the Context is created by assigning the imported useContext hook to the MyComponent function.

Consumer

The Consumer component is used to consume the shared data within a component. It allows components to subscribe to the context changes and access the shared value. We might not see the consumer per say but it will use the information rendered by the provider.

It must always be nested inside the Provider because the Provider will render first to pass data to the components consuming the data. In otherwords, it must exist before you can consume it.

import React, { useContext } from 'react';
import MyContext from './MyComponent';

const MyComponent = () => {
  const sharedValue = useContext(MyContext);

  return <p>{sharedValue}p>;
};

export default MyComponent;

In the code, the MyComponent component utilizes the MyContext context created earlier by using the useContext.

How to Create a Theme-Switching App using React Context.

Let's implement a simple theme-switching application using React Context API.

Step #1

In the src folder create a context folder. Then create a new file called ThemeContext.js.

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

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    ThemeContext.Provider>
  );
};

const useTheme = () => {
  return useContext(ThemeContext);
};

export { ThemeProvider, useTheme };

Walkthrough:

We started by creating a context (createContext()) and assigning a ThemeContext variable to it, which will act as storage for the theme data.
In the ThemeProvider component, we used the useState hook to manage current theme and also create a toggle that will help with switching between light and dark mode.
The wraps the children, making the props passed to it available to every component within its subtree.
The useTheme component is a custom hook that uses useContext() to consume the ThemeContext context.

Step #2

In your src folder create a ThemedComponent.js file. Copy and paste the code below in the file:

import React from 'react';
import { useTheme } from './context/ThemeContext';

const ThemedComponent = () => {
  const { theme, toggleTheme } = useTheme();

  return (
    
      Themed Component
      Current Theme: {theme}
      
    
  );
};

export default ThemedComponent;

Walkthrough:

Using the useTheme() hook, you can get access to consume the theme context. Remember that we passed theme and the toggleTheme function to the ThemeContext.Provider.
The component's style dynamically changes based on the current theme. This shows how components can adapt to global state changes managed by the context.
The button triggers the toggleTheme function to switch between light and dark mode.

Step #3

In your App.js file, copy and paste the code below:

import React from 'react';
import { ThemeProvider } from './context/ThemeContext';
import ThemedComponent from './ThemedComponent.js';

const App = () => {
  return (
    <ThemeProvider>
      <div>
        <h1>Themed Apph1>
        <ThemedComponent />
      div>
    ThemeProvider>
  );
};

export default App;

Walkthrough:

is the main app component where the ThemeProvider is used to wrap the whole application and give theme context access to all components within the ThemeProvider.
The ThemedComponent is rendered, showcasing the result of the components with access to the context.

After successful implementation of context, the result should be like so:

A simple theme switch using react context.

This should help you implement the React Context API in your project.

Conclusion

In this article, you learned about context, context provider, context consumer, and how to create a React provider wrapper that manages the value of a context through component state.

You also learned about prop threading, prop drilling and its disadvantage relative to React context.

Finally, you learned how to retrieve values from a context using the useContext hook by building a simple theme switcher.

Resources

Thanks for Reading!

How to Avoid Prop Drilling in React

freeCodeCamp — Tue, 07 Nov 2023 22:58:39 +0000

By Ogundiran Ayobami

In order to write scalable, reusable, and maintainable applications with React, you'll need to go beyond the surface of using React components, useEffect, useContext, useState, and the like. It involves learning in detail how React works in more depth.

And if you don't properly understand these key React concepts, you can run into various issues, like prop drilling.

In this tutorial, you'll learn what prop drilling is. I'll also teach you how to intuitively avoid it without relying on React context. In the end, you'll understand how to identify prop drilling without thinking and fix it with precision.

If you prefer a visual guide, here's a video version of this tutorial on my YouTube channel here (approximately 15 minutes).

What is Prop Drilling?

Prop drilling occurs when a parent component generates its state and passes it down as props to its children components that do not consume the props – instead, they only pass it down to another component that finally consumes it.

Below is an example of prop drilling in React:

function App() {
  const [profile, setProfile] = useState({ame: 'John'}); 
  return ( 
    <div> <Header profile={profile} /> 
    div> 
  ); 
} 

function Header({ profile }) { 
  return ( 
    <header> 
      <h1>This is the headerh1> 
      <Content profile={profile} /> 
    header> 
  ); 
} 

function Content({ profile }) { 
  return ( 
    <main> 
      <h2>Content Componenth2> 
      <p>{profile.name}p> 
    main> 
  ); 
} 

export default App;

If you check out the example above, you'll notice that profile is passed from the App component through the Header to the Content component, which eventually makes use of the props. This is commonly referred to as prop drilling as the Header component doesn't consume the prop but only passes it down to the Content component that finally consumes it.

Now that you understand what prop drilling is, the next challenge is to figure out how to avoid it because it's not always an intuitive process.

You'll need to start exploring methods to address it. While you can use component composition and React context to resolve it, the challenge lies in not always recognizing the issue until later.

To truly master the art of handling prop drilling intuitively, you must learn how to identify elongated props and contexts.

What is an Elongated Prop?

_Photo by [Unsplash](https://unsplash.com/@emilymorter?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Emily Morter / function Profile({ user }) { return ( <header> <h1>This is the headerh1> <Content user={user} /> header> ); }

user, in this example, is an elongated prop as it is neither created nor consumed by the Profile component. Instead, it is only passed down to the Content component. And that means we have extended user through a component that doesn't need it so that it can get to the one that does.

Now, let's revisit the example we used to illustrate prop drilling. Wait, are you thinking what I'm thinking? The prop that's being passed down in the prop drilling example is indeed an elongated prop, right? Yes, you've got it.

function App() {
  const [profile, setProfile] = useState({ame: 'John'}); 
  return ( 
    <div> 
      <Header profile={profile} /> 
    div> 
  ); 
} 

function Header({ profile }) { 
  return ( 
    <header> 
      <h1>This is the headerh1> 
      <Content profile={profile} /> 
    header> 
  ); 
} 

function Content({ profile }) { 
  return ( 
    <main> 
      <h2>Content Componenth2> 
      <p>{profile.name}p> 
    main> 
  ); 
} 

export default App;

In the code above, you can observe that the prop passed to Header is created in the App component. Then, Header passes it down to its child component named Content. As a result, the profile being passed down can be considered elongated because it is passed through a component (Header) that neither creates nor consumes it down to the one that does.

The Header component passing down the prop it doesn't create or need is unnecessarily stretching the context of the prop.

Now, the question is, how do elongated props help to intuitively avoid prop drilling in React? They make it easy for you to spot props being used where they're are neither created nor consumed.

Rather than focusing on how to solve prop drilling, elongated props enable you to avoid it. This is because it's intuitive to recognize when a component neither creates nor consumes props, and that helps you to know the component is irrelevant.

But before you learn how to quickly avoid prop drilling with your understanding of elongated props, it is important that you know the main causes of prop drilling. Then you'll truly know how to avoid it without thinking about it.

What Causes Prop Drilling?

_Photo by [Unsplash](https://unsplash.com/@etiennegirardet?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Etienne Girardet / function Header({ profile }) { return ( <header> <h1>This is the headerh1> <Content profile={profile} /> header> ); }

In this case, static elements

and

are grouped with a dependent component Content – and that's why we have prop drilling therein.

Provided that the Content component is independent or takes no props, it won't need profile and there won't be prop drilling in the first place. This is why forcing a component that should be independent to take props from its parent is a recipe for prop drilling in React.

Second of all, when a component accepts props that it doesn't use but merely passes it down to its children, this is a sign that you have prop drilling in your component:

function App () { 
  const [profile, setProfile] = useState({name: "Ayobami"})
  return ( 
    <>
      <Parent profile={profile} /> 
    
 ); 
}; 

function Parent({ profile }) { 
  return ( 
    <div>
      <Hero profile={profile} /> 
      <Features profile={profile} /> 
    div>
 ); 
};

In this case there is prop drilling because the Parent component takes profile and it doesn't use it though it passes it down to its children.

Third, when a component that represents an independent section of a page is forced to take props from its parent, prop drilling is inevitable. It should ideally be self-contained with its state and operations.

The exception would be if it's intentionally tied to its parent for specific reasons. In such cases, prop drilling becomes a necessary trade-off.

If you revisit the example of prop drilling cited in this article, you will realize it has a prop drilling issue because the Content component which could have been an independent component by having a state is forced to receive props from its parent.

And finally, the presence of elongated props is a sure sign of prop drilling. Since an elongated prop is a fundamental element that's consistently present in every case of prop drilling, grasping this concept allows you to instinctively avoid prop drilling.

When you spot an elongated prop, you can be certain that one of the other three mistakes is also in play. In short, an elongated prop is a prop that is not consumed and is also passed down to another component.

So grouping static elements with dependent components, forcing components to take props, elongated props, and receiving a prop without consuming it are the signs to recognize prop drilling in React.

How to Fix Prop Drilling with Component Composition

Component composition is a good approach to fix prop drilling. If you ever find yourself in a situation where a component passes down a prop it neither creates nor consumes, you can use component composition to fix it.

But to use component composition, you need to understand a component context.

What is a component context? ‌

The context of a component encompasses everything that is visible within it, including state, props, and children. The following code further illustrates this concept:

function App() { 
  const [profile, setProfile] = useState({name: 'Ayobami'}); 
  return ( 
    <div> 
      <Header profile={profile} /> 
    div> 
  ); 
} 

export default App;

In this scenario, the context of App refers to everything we can see within the App component – including the profile prop, the Header, and other App content. Therefore, any data created in the App component should ideally be utilized within the App component itself, either as its own data or as props to its children.

Prop drilling always emerges when the children receiving the props doesn't consume it but only passes it down to its children.

To avoid prop drilling in this case, any grandchildren components that require access to the same props, especially when their parent don't consume the data, should be passed as children ensuring that the data remains within the App context.

export function App() { 
  const [profile, setProfile] = useState({name: 'Ayobami'}); 
  return ( 
    <div> 
      <Header> 
        <Content profile={profile} /> 
      Header> 
    div> 
  ); 
}

Or

export function App() { 
  const [profile, setProfile] = useState({name: 'Ayobami'}); 
  return ( 
    <div> 
      <Header children={<Content profile={profile} />} > 
    div> 
  ); 
}

As you can see, we have resolved the prop drilling issue in the previous example, even though we still have a redundant component,

, right? We've successfully addressed prop drilling through component composition.

This process is quite straightforward because we concentrate on recognizing elongated props and repositioning them within appropriate contexts.

The concept of prop drilling is problem-focused, but prop elongation is solution-driven. When dealing with elongated props, our primary goal is to identify props that are not consumed but only passed down to another components.

How to Fix Prop Drilling by Moving State to the Consumer

Prop drilling can also be fixed by moving state to where it is consumed. The example of prop drilling in this article has a component named Content. But the component is forced to receive a prop from its parent instead of having a state and be an independent component – and so we have prop drilling.

We can fix the prop drilling in this case by moving the profile state to where it is consumed.

Let's revisit the example:

function App() {
  const [profile, setProfile] = useState({ame: 'John'}); 
  return ( 
    <div> 
      <Header profile={profile} />
      <Footer profile={profile />
    div> 
  ); 
} 

function Header({ profile }) { 
  return ( 
    <header> 
      <h1>This is the headerh1> 
      <Content profile={profile} /> 
    header> 
  ); 
} 

function Content({ profile }) { 
  return ( 
    <main> 
      <h2>Content Componenth2> 
      <p>{profile.name}p> 
    main> 
  ); 
} 

export default App;

We can fix prop drilling in this case by moving profile to where it is consumed:

function App() { 
  return ( 
    <div> 
      <Header />
      <Footer profile={profile />
    div> 
  ); 
} 

function Header() { 
  return ( 
    <header> 
      <h1>This is the headerh1> 
      <Content /> 
    header> 
  ); 
} 

function Content({ profile }) { 
  const [profile, setProfile] = useState({ame: 'John'});
  return ( 
    <main> 
      <h2>Content Componenth2> 
      <p>{profile.name}p> 
    main> 
  ); 
}

Now that we have lifted the profile to the Content component where it is consumed, the App component doesn't have a state, while the Header component doesn't receive a prop again as the Content component has its state.

But wait! There is a problem. The Footer component needs the state we moved away from App. There you are! That is the problem with lifting or moving state to where we think it is needed. In this case, if the Footer component doesn't need it, we won't have any issue – but Footer also needs the prop.

Now that Footer needs profile as a prop, we need to solve prop drilling with another method.

How to Fix Prop Drilling with a Children-Replacing-Parent Strategy

Earlier in this article, we talked about how to use component composition and moving state to its consumer to solve prop drilling. But as you saw, they have some issues – duplicated components or states.

But using this children-replacing-parent approach fixes the problem effectively:

Working but could be better:

export function App() { 
  const [profile, setProfile] = useState({name: 'Ayobami'}); 
  return ( 
    <div> 
      <Header> 
        <Content profile={profile} /> 
      Header> 
    div> 
  ); 
}

function Header({ profile }) { 
  return ( 
    <header> 
      <h1>This is the headerh1> 
      <Content profile={profile} /> 
    header> 
  ); 
}

The example above shows a solution to the prop drilling example in this article. But as you can see, it has a redundant component, as Header does nothing.

Here's a better version:**

export function App() { 
  const [profile, setProfile] = useState({name: 'Ayobami'}); 
  return ( 
    <header> 
      <h1>This is the headerh1> 
      <Content profile={profile} /> 
    header> 
  ); 
}

In the above code, we enhance the component composition solution we previously implemented for the prop drilling example by replacing the redundant Header component with its content in its parent (App).

What to Avoid

_Photo by [Unsplash](https://unsplash.com/@edwinhooper?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Edwin Hooper / component composition without introducing redundant components or states when resolving prop drilling.

By avoiding elongated props, you pave the way for crafting maintainable, high-performing, reusable, and scalable React components. It simplifies the process of lifting states and components by removing the struggle of deciding where to place them.

With your understanding of elongated props, you can confidently position props and components within the right context without undue stress.

In short, you can now discover prop drilling intuitively by paying attention to any component that takes props it doesn't consume and only passes it down to another component.

Thanks for reading – cheers!

Hey wait! I am Ayobami Ogundiran and I am about to start showing how to build your own React, Redux, TypeScript, Zod or Ecommerce websites on my YouTube channel. Click to subscribe to stay connected.

How to Use the React Context API in Your Projects

Boateng Dickson — Wed, 29 Mar 2023 20:04:36 +0000

Managing state is an essential part of developing applications in React. A common way to manage state is by passing props. Passing props means sending data from one component to another. It's a good way to make sure that data gets to the right place in a React application.

But it can be annoying to pass props when you have to send the same data to lots of components or when components are far away from each other. This can make an application slower and harder to work with.

Fortunately, React provides a built-in feature known as the context API that helps “teleport” data to the components that need it without passing props.

In this article, we'll explore how the context API works and how to use it effectively in your React applications.

The Problem with Passing Props

In React, passing props is a fundamental concept that enables a parent component to share data with its child components as well as other components within an application.

In many cases, passing props can be an effective way to share data between different parts of your application. But passing props down a chain of multiple components to reach a specific component can make your code overly cumbersome.

Illustration of passing props from parent to children

From the above diagram, to pass data down to the component "Child B", we need to pass it down through all the intermediate components, even if those components don't actually use the data themselves. This is what is referred to as "prop drilling."

Prop drilling can make your code more difficult to read and maintain, and can also make it harder to refactor your components later on.

This is where the Context API comes in. With Context API, you can store data at the top level of the component tree and make it available to all other components that need it without passing props.

How the Context API Works

Context API allows data to be passed through a component tree without having to pass props manually at every level. This makes it easier to share data between components.

A diagram illustrating how Context API works

For example, let’s say you have a shopping app with a component that shows a user’s shopping cart, and another component that shows the user’s order history.

With Context API, you can create a “context” that holds the user’s shopping information, like their cart and order history. Then, you can use that context in both the shopping cart and the order history component, without having to pass the information down through props.

It’s like having a big box that holds all the things you need for your shopping trip. You can take things out of the box when you need them, and put them back in when you’re done.

Basically, Context API consists of two main components: the context provider and the context consumer. The provider is responsible for creating and managing the context, which holds the data to be shared between components. On the other hand, the consumer is used to access the context and its data from within a component.

In the example given, the provider will create the context that holds the user's shopping information, while the consumer components (shopping cart and order history) will access that context to retrieve the data they need. This avoids the need to pass the information down through props, making your code more efficient and easier to manage.

How to Get Started with the Context API

To start using the Context API in your applications, you'll need to follow a few simple steps:

1. Create a Context Object

First, you need to create a context object using the createContext function from the 'react' library. This context object will hold the data that you want to share across your application.

Create a new file named MyContext.js in the src folder and add the following code to create a context object:

import { createContext } from 'react';

export const MyContext = createContext("");

In the above code, we're importing createContext from React and using it to create a new context object named "MyContext". Then, we are exporting the context object so that we can use it in other parts of our application.

2. Wrap Components with a Provider

Once you've created a context object, you need to wrap the components that need access to the shared data with a Provider component. The Provider component accepts a "value" prop that holds the shared data, and any component that is a child of the Provider component can access that shared data.

It's important to note that the Provider component should be wrapped around the top-level component in an application to ensure that all child components have access to the shared data.

Here's an example that demonstrates how to wrap components with a Provider in Context API:

// Create a parent component that wraps child components with a Provider

import { useState, React } from "react";
import { MyContext } from "./MyContext";
import MyComponent from "./MyComponent";

function App() {
  const [text, setText] = useState("");

  return (
    <div>
      <MyContext.Provider value={{ text, setText }}>
        <MyComponent />
      MyContext.Provider>
    div>
  );
}

export default App;

In this example, we have a parent component called App. This component has a state variable called "text", which is initially set to an empty string. We've also defined a function called setText that can be used to update the value of text.

Inside the return statement of the App component, we've wrapped the children of this component with the provider component ("MyContext.Provider"). Then we've passed an object to the value prop of the provider component that contains "text" and "setText" values.

3. Consume the Context

Now that we've created the provider component, we need to consume the context in other components. To do this, we use the "useContext" hook from React.

import { useContext } from 'react';
import { MyContext } from './MyContext';

function MyComponent() {
  const { text, setText } = useContext(MyContext);

  return (
    <div>
      <h1>{text}h1>
      <button onClick={() => setText('Hello, world!')}>
        Click me
      button>
    div>
  );
}

export default MyComponent;

In this example, we've used the useContext hook to access the "text" and "setText" variables that were defined in the provider component.

Inside the return statement of "MyComponent", we've rendered a paragraph element that displays the value of text. We've also rendered a button that, when clicked, will call the setText function to update the value of text to "Hello, world!".

And that's it! This is how you can use the Context API in your React application.

By creating a context object, defining a provider component, and consuming the context in other components, you can share data across your application in a simple and efficient way.

Use Cases of Context API

Here are some real-world use cases of Context API.

Theming: You can use Context API to store the current theme of your application and make it available to all components. This way, whenever the user switches the theme (such as enabling dark mode), all components will be updated with the new theme.
User Authentication: You can also use Context API to store a user's authentication status and pass it down to all the components that need it. This way, you can easily restrict access to certain parts of your application based on the user's authentication status.
Multilingual Support: You can store the current language of your application in the context and pass it down to all the components that need it. This way, you can easily switch between different languages without having to pass the language down as props to all the components.
Accessing data from external sources: Finally, you can use the Context API to store data retrieved from external sources such as APIs or databases and make it available to all components. This can simplify your code and make it easier to manage data across your application.

Overall, Context API provides a flexible and efficient way to manage state data across your application, and it can be particularly useful for managing global data that needs to be shared between multiple components.

Best Practices for Context API

As with any tool, there are best practices and common pitfalls to keep in mind when using the Context API in your projects. Here are some tips for effective use of the Context API:

Use a separate file to define your Context: It's a good practice to define your context object in a separate file to keep your code organized and easy to maintain.
Keep Context API limited to global state management only: It's best to use the Context API for managing state that needs to be accessed across multiple components in your application. Avoid using it for state that only needs to be accessed within a single component, as it can lead to unnecessary complexity and performance issues.
Use context providers sparingly: While context providers can be a powerful tool for managing global state, it's generally a good idea to use them sparingly. Instead, consider using props to pass data down through your component tree whenever possible.
Use default values: When creating a new context, it's a good idea to provide a default value that will be used if no provider is present. This can help prevent unexpected errors and make your code more robust. Note that, for the project we did above, we used an empty string as the default value for the context object.

Recap

In this article, we explored the React Context API, a powerful tool for managing state in React applications.

We have walked through the basics of the Context API, including creating a context, creating a Provider component to pass data to child components, and consuming data in other component using the useContext hook.

Conclusion

If you're interested in exploring how to implement a light/dark mode theme in your own React projects using the Context API, I've created a simple website that demonstrates how to do just that. You can find the code for the project on my GitHub.

By exploring the code and experimenting with your own modifications, you'll be well on your way to mastering the Context API and unlocking its full potential in your own projects.

Thank you for reading!

How to Avoid Prop Drilling with the React Context API

Israel Chidera — Thu, 13 Oct 2022 16:52:03 +0000

The React Context API provides a way to pass data through multiple nested levels of components without having to manually pass that data to each level.

React context is one sure way of globally managing your data in your app, and it's a good way to avoid prop drilling.

In this tutorial, we will learn how to use the React context API (useContext hook) to avoid prop drilling.

What is Prop Drilling?

In a traditional React application, data is often shared between components using props. Manually sharing this data can be hectic, especially when shared between multiple nested components. Also, sharing data between two child components can be cumbersome. Hence the need for global state management.

Prop drilling is a situation where data is passed from one component through multiple interdependent components until you get to the component where the data is needed. Here's an illustration of prop drilling to help you understand:

Passing data through multiple components is not a good way of writing clean, reusable, and DRY code.

The React context API is a fast way of avoiding prop drilling and ensuring your data is managed globally without using a huge third-party state management app like Redux and MobX.

What is the React Context API?

React context is a built-in API that uses the useContext hook to share data across components.

Imagine passing the data of an authenticated user from a parent component to a deep nested child component. This will be cumbersome if you need to pass the data through a lot of intermediate components.

A better approach to doing this is using React context to handle the data.

How to Use the React Context API

How to create context

useContext is a built-in hook in React. You can start using the context API by importing the createContext function from React like this:

Import {createContext} from ‘react’;
const AuthContext = createContext();

Here, we initialized our context and named it AuthContext. The next step is to provide the context.

How to provide the context to the components that need it

The context API uses a provider to pass data to its child components. You will have to wrap all components with a provider component.

The Provider component has a value prop as seen above. The value of the context can either be updated or set using the value prop. In our case, we will be setting the value prop to the name of our authenticated user.

import React from ‘react’;

function App() {

    const username = “John Doe”

    return(
        
            
        
    )
}

export default App;

Hooray! All components inside this App component will have access to the username data. Next, let's see how to use the context.

How to consume the context

We can consume the context by using the useContext hook. Without passing data through nested components, you can access your context in any component you want. Here’s how.

import { useContext } from ‘react’;

const Profile = () => {

    const value = useContext(AuthContext);

    return (
        
            {value}
        
    )
}

export default Profile

Conclusion

Apart from solving the problem of prop drilling, you can also use React context for theme configuration, global state management and more.

Note that the React context API is not a replacement for a global state management tool like Redux and MobX. You can read more about React Context here.

I hope you enjoyed this tutorial.

Happy coding!

React Context for Beginners – The Complete Guide (2021)

Reed — Wed, 21 Jul 2021 15:39:28 +0000

React context is an essential tool for every React developer to know. It lets you easily share state in your applications.

In this comprehensive guide, we will cover what React context is, how to use it, when and when not to use context, and lots more.

Even if you've never worked with React context before, you're in the right place. You will learn everything you need to know with simple, step-by-step examples.

Let's get started!

What is React context?
When should you use React context?
What problems does React context solve?
How do I use React context?
What is the useContext hook?
You may not need context
Does React context replace Redux?
React context caveats

What is React context?

React context allows us to pass down and use (consume) data in whatever component we need in our React app without using props.

In other words, React context allows us to share data (state) across our components more easily.

When should you use React context?

React context is great when you are passing data that can be used in any component in your application.

These types of data include:

Theme data (like dark or light mode)
User data (the currently authenticated user)
Location-specific data (like user language or locale)

Data should be placed on React context that does not need to be updated often.

Why? Because context was not made as an entire state management system. It was made to make consuming data easier.

You can think of React context as the equivalent of global variables for our React components.

What problems does React context solve?

React context helps us avoid the problem of props drilling.

Props drilling is a term to describe when you pass props down multiple levels to a nested component, through components that don't need it.

Here is an example of props drilling. In this application, we have access to theme data that we want to pass as a prop to all of our app's components.

As you can see, however, the direct children of App, such as Header, also have to pass the theme data down using props.

export default function App({ theme }) {
  return (
    <>
      <Header theme={theme} />
      <Main theme={theme} />
      <Sidebar theme={theme} />
      <Footer theme={theme} />
    
  );
}

function Header({ theme }) {
  return (
    <>
      <User theme={theme} />
      <Login theme={theme} />
      <Menu theme={theme} />
    
  );
}

What is the issue with this example?

The issue is that we are drilling the theme prop through multiple components that don't immediately need it.

The Header component doesn't need theme other than to pass it down to its child component. In other words, it would be better for User , Login and Menu to consume the theme data directly.

This is the benefit of React context – we can bypass using props entirely and therefore avoid the issue of props drilling.

How do I use React context?

Context is an API that is built into React, starting from React version 16.

This means that we can create and use context directly by importing React in any React project.

There are four steps to using React context:

Create context using the createContext method.
Take your created context and wrap the context provider around your component tree.
Put any value you like on your context provider using the value prop.
Read that value within any component by using the context consumer.

Does all this sound confusing? It's simpler than you think.

Let's take a look at a very basic example. In our App, let's pass down our own name using Context and read it in a nested component: User.

import React from 'react';

export const UserContext = React.createContext();

export default function App() {
  return (
    <UserContext.Provider value="Reed">
      <User />
    UserContext.Provider>
  )
}

function User() {
  return (
    <UserContext.Consumer>
      {value => <h1>{value}h1>} 
      {/* prints: Reed */}
    UserContext.Consumer>
  )
}

Let's break down what we are doing, step-by-step:

Above our App component, we are creating context with React.createContext() and putting the result in a variable, UserContext. In almost every case, you will want to export it as we are doing here because your component will be in another file. Note that we can pass an initial value to our value prop when we call React.createContext().
In our App component, we are using UserContext. Specifically UserContext.Provider. The created context is an object with two properties: Provider and Consumer, both of which are components. To pass our value down to every component in our App, we wrap our Provider component around it (in this case, User).
On UserContext.Provider, we put the value that we want to pass down our entire component tree. We set that equal to the value prop to do so. In this case, it is our name (here, Reed).
In User, or wherever we want to consume (or use) what was provided on our context, we use the consumer component: UserContext.Consumer. To use our passed down value, we use what is called the render props pattern. It is just a function that the consumer component gives us as a prop. And in the return of that function, we can return and use value.

What is the useContext hook?

Looking at the example above, the render props pattern for consuming context may look a bit strange to you.

Another way of consuming context became available in React 16.8 with the arrival of React hooks. We can now consume context with the useContext hook.

Instead of using render props, we can pass the entire context object to React.useContext() to consume context at the top of our component.

Here is the example above using the useContext hook:

import React from 'react';

export const UserContext = React.createContext();

export default function App() {
  return (
    <UserContext.Provider value="Reed">
      <User />
    UserContext.Provider>
  )
}

function User() {
  const value = React.useContext(UserContext);  

  return <h1>{value}h1>;
}

The benefit of the useContext hook is that it makes our components more concise and allows us to create our own custom hooks.

You can either use the consumer component directly or the useContext hook, depending on which pattern you prefer.

You may not need context

The mistake many developers make is reaching for context when once they have to pass props down several levels to a component.

Here is an application with a nested Avatar component that requires two props username and avatarSrc from the App component.

export default function App({ user }) {
  const { username, avatarSrc } = user;

  return (
    <main>
      <Navbar username={username} avatarSrc={avatarSrc} />
    main>
  );
}

function Navbar({ username, avatarSrc }) {
  return (
    <nav>
      <Avatar username={username} avatarSrc={avatarSrc} />
    nav>
  );
}

function Avatar({ username, avatarSrc }) {
  return <img src={avatarSrc} alt={username} />;
}

If possible, we want to avoid passing multiple props through components that don't need it.

What can we do?

Instead of immediately resorting to context because we are prop drilling, we should better compose our components.

Since only the top most component, App, needs to know about the Avatar component, we can create it directly within App.

This allows us to pass down a single prop, avatar, instead of two.

export default function App({ user }) {
  const { username, avatarSrc } = user;

  const avatar = <img src={avatarSrc} alt={username} />;

  return (
    <main>
      <Navbar avatar={avatar} />
    main>
  );
}

function Navbar({ avatar }) {
  return <nav>{avatar}nav>;
}

In short: don't reach for context right away. See if you can better organize your components to avoid prop drilling.

Does React context replace Redux?

Yes and no.

For many React beginners, Redux is a way of more easily passing around data. This is because Redux comes with React context itself.

However, if you are not also updating state, but merely passing it down your component tree, you do not need a global state management library like Redux.

React context caveats

Why it is not possible to update the value that React context passes down?

While it is possible to combine React context with a hook like useReducer and create a makeshift state management library without any third-party library, it is generally not recommended for performance reasons.

The issue with this approach lies in the way that React context triggers a re-render.

If you are passing down an object on your React context provider and any property on it updates, what happens? Any component which consumes that context will re-render.

This may not be a performance issue in smaller apps with few state values that are not updated very often (such as theme data). But it is a problem if you will be performing many state updates in an application with a lot of components in your component tree.

Conclusion

I hope this guide gave you a better understanding of how to use React context from front to back.

If you want an even more in-depth grasp of how to use React context to build amazing React projects, check out The React Bootcamp.

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

Build a React Budget Tracker App – Learn React & Context API with this Fun Project

Chris Blakely — Fri, 12 Mar 2021 19:24:55 +0000

In this React Budget Tracker App tutorial we're going to:

We’ll learn how break down a UI into React components
Learn how to work with state using the Context API
Learn about actions, reducers, and the dispatch function

And I’ll give you some challenges which you can try at the end!

This is what we'll build:

The user can:

Add expenses which have a name and a cost
Remove expenses
View how much of their budget is remaining
View how much they've spent so far
(Challenge) Edit budget
(Challenge) Search expenses

Video Walkthrough

Heres a video walkthrough if you want to supplement your reading (on YouTube)

Source Code

Finally, in case you get lost while following along, you can grab the finished code here (on GitHub).

Let's Go!

How to Setup a React Project

The first thing we need to do is setup a React project. For this we'll use create-react-app.

Fire up a terminal and type:

npx create-react-app budget-tracker

When that's finished doing its thing we're going to install Bootstrap. This will give us ready-made styles we can use instead of having to create our own in CSS.

In the same terminal, change to your working directory, and install Bootstrap:

cd budget-tracker
npm i bootstrap

Next we're going to install a package that allows us to generate IDs. We'll be using IDs to identify each expense in the list, so this is important.

Run the following command in your project directory:

npm i uuid

The last package we need to install gives us some icons to use, which saves us from having to create them ourselves.

Run the following command in your project directory:

npm i react-icons

Now open up the project in VS Code (or whatever IDE you use). You should see some stuff appear in the project tree (this is our empty React project).

You can ignore most of this, as we'll be creating our own components. Open up App.js, delete everything, and add the following:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {
    return <p>Hello React!p>;
};

export default App;

What this does:

Imports the bootstrap CSS into our project
Creates a component that displays "Hello React!" with paragraph tags
Exports this component so other components can use it

Next we'll fire up the app and make sure everything is working as it should. Open a terminal (either in VS Code or otherwise) and start the app by typing the following:

npm start

All being well, the app should start and open in a browser:

The text "Hello React" should appear on the page. This means your app is working!

Success! Now we're ready to start building out our React components.

How to Put the UI Components in Place

One approach to building apps is to start by putting the UI components in place with some dummy data. This usually helps with visualising what state objects are needed, and usually means less rework later on.

With that in mind we're going to put our UI components in place starting at the top and working down.

We'll add a title, then add a new component for each of the "boxes" shown. We'll add some dummy data just to get things displaying correctly

How to Create the Budget Component

Jump into the code, in the src folder, create a new folder called components. Within this, create a file called Budget.js. Your project structure should look like this:

Open up Budget.js and add the following:

import React from 'react';

const Budget = () => {
    return (
        <div className='alert alert-secondary'>
            <span>Budget: £2000span>
        div>
    );
};

export default Budget;

What we're doing:

Creating a new component called Budget (line 3)
Using the Bootstrap Alert classes to gives us a nice gray background (line 5)
Adding some text and hard coding a value (line 6)

How to Create the `Remaining` Component

Next we'll create the Remaining component, which shows how much budget the user has left.

Create a new file under src/components called Remaining.js. Open it up and add the following:

import React from 'react';

const Remaining = () => {
    return (
        <div className='alert alert-success'>
            <span>Remaining: £1000span>
        div>
    );
};

export default Remaining;

What we're doing:

Creating a new component called Remaining (line 3)
Using the Bootstrap Alert classes to gives us a green background (line 5)
Adding some text and hard coding a value (line 6)
Adding Spent so Far

Lastly, we'll create the Spent so Far component, which shows how much the user has spent so far.

Create a new file under src/components called ExpenseTotal.js. Open it up and add the following:

import React from 'react';

const ExpenseTotal = () => {
    return (
        <div className='alert alert-primary'>
            <span>Spent so far: £1000span>
        div>
    );
};

export default ExpenseTotal;

What we're doing:

Creating a new component called ExpenseTotal (line 3)
Using the Bootstrap Alert classes to gives us a blue background (line 5)
Adding some text and hard coding a value (line 6)

How to Add a Title and Render our Components

At this point you might be thinking, "these components all look the same, what gives?!". This is true, although remember we're just adding some hard coded data for now. Later, each component will do different things to display the data dynamically.

Now we've created our components, we need to render them in App.js. Open App.js and add the following:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Budget from './components/Budget';
import Remaining from './components/Remaining';
import ExpenseTotal from './components/ExpenseTotal';

const App = () => {
    return (
            <div className='container'>
                <h1 className='mt-3'>My Budget Plannerh1>
                <div className='row mt-3'>
                    <div className='col-sm'>
                        <Budget />
                    div>
                    <div className='col-sm'>
                        <Remaining />
                    div>
                    <div className='col-sm'>
                        <ExpenseTotal />
                    div>
                div>
            div>
    );
};

export default App;

What we're doing:

Importing our different components (lines 3-5)
Adding a bootstrap container that helps us center our App on the page (line 9)
Adding a title (line 9)
Adding a Bootstrap row (line 10)
Adding a column within the row for each of our components so far (lines 12-20)

Now if you run the app, you should see the title, and our components rendered on the page!

How to Create the Expense List Component

The expenses list shows the expenses the user has added so far, displaying the Name, cost, and a delete button for each

Next we'll build the ExpenseList component. This component will be in charge of taking a list of expenses, and rendering an ExpenseItem component for each item.

We'll add some dummy data, to make sure our UI looks good and things are working as intended. Later, this stuff will come from context.

Start by creating a new file under src/components called ExpenseList.js. Open up ExpenseList.js and add the following:

import React from 'react'
import ExpenseItem from './ExpenseItem';

const ExpenseList = () => {
    const expenses = [
        { id: 12, name: 'shopping', cost: 40 },
        { id: 13, name: 'holiday', cost: 400 },
        { id: 14, name: 'car service', cost: 50 },
    ];

    return (
        <ul className='list-group'>
            {expenses.map((expense) => (
                <ExpenseItem id={expense.id} name={expense.name} cost={expense.cost} />
            ))}
        ul>
    )
}

export default ExpenseList

What we're doing:

Adding a dummy list of expenses. For each expense we need an ID, a name, and a cost. Later, we'll take this list from context (line 4)
Creating a list (line 11)
Using the map function to iterate over the expenses and displaying an ExpenseItem component (we haven't created this yet! Line 12)
Passing the ID, name, and cost to the ExpenseItem component as props

How to Create the Expense Item Component

Now we've created a component to hold our list, we need a component to render each item. Create a new file in the src/components folder called ExpenseItem.js. Open it up and add the following:

import React from 'react';
import { TiDelete } from 'react-icons/ti';

const ExpenseItem = (props) => {
    return (
        <li className='list-group-item d-flex justify-content-between align-items-center'>
            {props.name}
            <div>
                <span className='badge badge-primary badge-pill mr-3'>
                    £{props.cost}
                span>
                <TiDelete size='1.5em'>TiDelete>
            div>
        li>
    );
};

export default ExpenseItem;

What we're doing:

Creating a list item (line 6)
Rendering the name of the expense, which we get from props (line 7)
Rendering the cost of the expense, which we also get from props
We're displaying a DeleteIcon (line 12) which we get from react-icons package (line 2)

How to Render the ExpenseList Component

Now we've created our components, we just have to render ExpenseList in App.js. Open up App.js and update it with the following:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Budget from './components/Budget';
import Remaining from './components/Remaining';
import ExpenseTotal from './components/ExpenseTotal';
import ExpenseList from './components/ExpenseList';

const App = () => {
    return (
        <div className='container'>
            <h1 className='mt-3'>My Budget Plannerh1>
            <div className='row mt-3'>
                <div className='col-sm'>
                    <Budget />
                div>
                <div className='col-sm'>
                    <Remaining />
                div>
                <div className='col-sm'>
                    <ExpenseTotal />
                div>
            div>
            <h3 className='mt-3'>Expensesh3>
            <div className='row mt-3'>
                <div className='col-sm'>
                    <ExpenseList />
                div>
            div>
        div>
    );
};

export default App;

What's new:

We imported our ExpenseList (line 6)
Added a new Bootstrap row (line 24)
Rendered our ExpenseList (line 26)

Now if you save/run the App, you'll see the Expenses list has appeared!

How to create the "Add Expense" form component

Our UI components are nearly complete! The last component we need is the "Add Expense" form component, which lets users add new expenses. We'll put the UI components for the form in place first, then come back later and add the fancy stuff.

Create a new file in src/components called AddExpenseForm.js. Fire this up and add the following:

import React from 'react';

const AddExpenseForm = () => {

    return (
        <form>
            <div className='row'>
                <div className='col-sm'>
                    <label for='name'>Namelabel>
                    <input
                        required='required'
                        type='text'
                        className='form-control'
                        id='name'
                    >input>
                div>
                <div className='col-sm'>
                    <label for='cost'>Costlabel>
                    <input
                        required='required'
                        type='text'
                        className='form-control'
                        id='cost'
                    >input>
                div>

            div>
            <div className='row'>
                <div className='col-sm'>
                    <button type='submit' className='btn btn-primary mt-3'>
                        Save
                    button>
                div>
            div>
        form>
    );
};

export default AddExpenseForm;

What we're doing:

Adding our form tags (line 6)
Adding a label/input for our name field (line 9)
Adding a label/input for our cost field (line 18)
Adding a button to submit the form (line 30)

How to Render the AddExpenseForm component

Finally in App.js, we have to render our new component. Update App.js with the following:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Budget from './components/Budget';
import Remaining from './components/Remaining';
import ExpenseTotal from './components/ExpenseTotal';
import ExpenseList from './components/ExpenseList';
import AddExpenseForm from './components/AddExpenseForm';

const App = () => {
    return (
        <div className='container'>
            <h1 className='mt-3'>My Budget Plannerh1>
            <div className='row mt-3'>
                <div className='col-sm'>
                    <Budget />
                div>
                <div className='col-sm'>
                    <Remaining />
                div>
                <div className='col-sm'>
                    <ExpenseTotal />
                div>
            div>
            <h3 className='mt-3'>Expensesh3>
            <div className='row mt-3'>
                <div className='col-sm'>
                    <ExpenseList />
                div>
            div>
            <h3 className='mt-3'>Add Expenseh3>
            <div className='row mt-3'>
                <div className='col-sm'>
                    <AddExpenseForm />
                div>
            div>
        div>
    );
};

export default App;

What's changed:

Imported the AddExpenseForm (line 7)
Rendered the AddExpenseForm (line 33)

How to Add the Context API

The Context API is what we'll use to store our global state. It's already part of the React library so no need to import/install anything else.

Start by creating a new folder in the src folder called context. Within this folder create a new file called AppContext.js.

How to Create the Initial State

The first thing our context needs to work is an initial state. This indicates the "shape" of our state (in other words, what properties and data we have) and can be used to initialise the app with data from an API call, for example.

For now we'll just add some initial values. In AppContext.js, add the following:

const initialState = {
    budget: 2000,
    expenses: [
        { id: 12, name: 'shopping', cost: 40 },
        { id: 13, name: 'holiday', cost: 400 },
        { id: 14, name: 'car service', cost: 50 },
    ],
};

We're adding an initial budget
We're adding a dummy list of expenses

NOTE: the intialState properties do not need to have values, they can be set to empty strings, empty arrays, and so on. We're adding data for visual purposes

How to Create the AppContext

Next we'll create the AppContext. This is the thing our components import and use to get the state.

Update AppContext.js with the following:

const initialState = {
    budget: 2000,
    expenses: [
        { id: 12, name: 'shopping', cost: 40 },
        { id: 13, name: 'holiday', cost: 400 },
        { id: 14, name: 'car service', cost: 50 },
    ],
};

export const AppContext = createContext();

All we've done is added a call to createContext at line (11) - thats our context object created!

How to Create the AppProvider

The provider is a component that wraps the components which we want to pass the state to. We use it in conjunction with the useReducer hook to actually store the global state.

Update the AppContext.js file like so:

const initialState = {
    budget: 2000,
    expenses: [
        { id: 12, name: 'shopping', cost: 40 },
        { id: 13, name: 'holiday', cost: 400 },
        { id: 14, name: 'car service', cost: 50 },
    ],
};

export const AppContext = createContext();

export const AppProvider = (props) => {
    const [state, dispatch] = useReducer(AppReducer, initialState);

    return (
        <AppContext.Provider
            value={{
                budget: state.budget,
                expenses: state.expenses,
                dispatch,
            }}
        >
            {props.children}
        AppContext.Provider>
    );
};

What we're doing:

Creating our Provider component (line 12)
Setting up the useReducer hook which will hold our state, and allow us to update the state via dispatch (NOTE we haven't created the AppReducer yet! Line 13)
We're returning AppContext.Provider. This has a value prop which contains the data which we allow our components to see and have access to, as well as the dispatch function that lets us update the state by dispatching actions (line 16)

How to Create the AppReducer

Next we’ll create the AppReducer. The reducer is in charge of creating the new global state object, based on an action type and a payload.

Update AppContext.js with the following:

const AppReducer = (state, action) => {
    switch (action.type) {
        default:
            return state;
    }
};

const initialState = {
    budget: 2000,
    expenses: [
        { id: 12, name: 'shopping', cost: 40 },
        { id: 13, name: 'holiday', cost: 400 },
        { id: 14, name: 'car service', cost: 50 },
    ],
};

export const AppContext = createContext();

export const AppProvider = (props) => {
    const [state, dispatch] = useReducer(AppReducer, initialState);

    return (
        <AppContext.Provider
            value={{
                budget: state.budget,
                expenses: state.expenses,
                dispatch,
            }}
        >
            {props.children}
        AppContext.Provider>
    );
};

What we're doing:

Creating a function which accepts the current state, and an action (line 1)
We use a switch based on the action.type to decide how to update the state (line 2)
For now since we’re just getting things set up we’re just going to return the default state, and add actions later as we need them (line 3)

And thats it! Our global state is now set up and ready to go.

How to Link AppContext to our App

The next step is to link our AppContext to our App component. We do this by wrapping the components which we want to pass the state to with the AppProvider.

Jump back into App.js and update the following:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Budget from './components/Budget';
import Remaining from './components/Remaining';
import ExpenseTotal from './components/ExpenseTotal';
import ExpenseList from './components/ExpenseList';
import AddExpenseForm from './components/AddExpenseForm';
import { AppProvider } from './context/AppContext';

const App = () => {
    return (
        <AppProvider>
            <div className='container'>
                <h1 className='mt-3'>My Budget Plannerh1>
                <div className='row mt-3'>
                    <div className='col-sm'>
                        <Budget />
                    div>
                    <div className='col-sm'>
                        <Remaining />
                    div>
                    <div className='col-sm'>
                        <ExpenseTotal />
                    div>
                div>
                <h3 className='mt-3'>Expensesh3>
                <div className='row mt-3'>
                    <div className='col-sm'>
                        <ExpenseList />
                    div>
                div>
                <h3 className='mt-3'>Add Expenseh3>
                <div className='row mt-3'>
                    <div className='col-sm'>
                        <AddExpenseForm />
                    div>
                div>
            div>
        AppProvider>
    );
};

export default App;

What's changed:

Imported our AppProvider (line 8)
Nested our components in the AppProvider element (lines 12 / lines 39)

Now that our components are nested within the AppProvider, they have access to value object that the AppProvider exposes.

How to Connect our Components to AppContext

How to Render Budget from Context

Now we can start pulling global state values into our components. We'll start with the budget, so jump into Budget.js and add the following:

import React, { useContext } from 'react';
import { AppContext } from '../context/AppContext';

const Budget = () => {
    const { budget } = useContext(AppContext);

    return (
        <div className='alert alert-secondary'>
            <span>Budget: £{budget}span>
        div>
    );
};

export default Budget;

What we're doing:

We have to import AppContext from our Context (line 2)
We import the useContext hook, and pass our AppContext to it - this is how a component connects to the context in order to get values from global state
We use destructuring to get the budget from context (line 5)
We're rendering the budget in our JSX (line 9)

Now if you change the budget in AppContext and reload your browser, you will see the budget updates on the UI. This means our component is successfully pulling data from our context. Success!

How to Render Expenses from Context

Now we can do something similar with the expense list. Open up ExpenseList.js and update it with the following:

import React, { useContext } from 'react';
import ExpenseItem from './ExpenseItem';
import { AppContext } from '../context/AppContext';

const ExpenseList = () => {
    const { expenses } = useContext(AppContext);

    return (
        <ul className='list-group'>
            {expenses.map((expense) => (
                <ExpenseItem id={expense.id} name={expense.name} cost={expense.cost} />
            ))}
        ul>
    );
};

export default ExpenseList;

What we're doing:

Importing our AppContext and useContext hook like before
We've removed the dummy list of expenses
We've replaced the dummy list with the expenses list we store in context

Since we've already done the work to render the list of expenses, we don't have to do anything else! Refresh the browser and you'll see the list now comes from context rather than the dummy list.

Remember we exported expenses as part of the value object in the provider. Any component wrapped in the provider can get access to this value object, and use destructuring to get the specific value it needs.

How to Add a New Expense - Capturing Form Values

So far we've looked at how to get values from state, next we'll look at how we can dispatch actions and update the state.

Before we do that, we need to know the name and the cost of the new expense that the user has entered. Jump into AddExpenseForm.js and add the following:

import React, { useState } from 'react';

const AddExpenseForm = () => {
    const [name, setName] = useState('');
    const [cost, setCost] = useState('');

    const onSubmit = (event) => {

    };

    return (
        <form onSubmit={onSubmit}>
            <div className='row'>
                <div className='col-sm'>
                    <label for='name'>Namelabel>
                    <input
                        required='required'
                        type='text'
                        className='form-control'
                        id='name'
                        value={name}
                        onChange={(event) => setName(event.target.value)}
                    >input>
                div>
                <div className='col-sm'>
                    <label for='cost'>Costlabel>
                    <input
                        required='required'
                        type='text'
                        className='form-control'
                        id='cost'
                        value={cost}
                        onChange={(event) => setCost(event.target.value)}
                    >input>
                div>
                <div className='col-sm'>
                    <button type='submit' className='btn btn-primary mt-3'>
                        Save
                    button>
                div>
            div>
        form>
    );
};

export default AddExpenseForm;

What we're doing:

Using React to control the input values. For each input field, we have a state object (lines 7 and 8)
When the user types into the inputs, the corresponding state values will update (lines 25 and 36)
When the user clicks the button, it will call an onSubmit function. This function doesn't do anything right now, but this is where we'll dispatch the action from

Now we have the form values stored in state, we can dispatch an action to update the state.

How to Add a New Expense - Dispatching an action

Update the AddExpenseForm with the following:

import React, { useContext, useState } from 'react';
import { AppContext } from '../context/AppContext';
import { v4 as uuidv4 } from 'uuid';

const AddExpenseForm = () => {
    const { dispatch } = useContext(AppContext);

    const [name, setName] = useState('');
    const [cost, setCost] = useState('');

    const onSubmit = (event) => {
        event.preventDefault();

        const expense = {
            id: uuidv4(),
            name: name,
            cost: parseInt(cost),
        };

        dispatch({
            type: 'ADD_EXPENSE',
            payload: expense,
        });
    };

    return (
        <form onSubmit={onSubmit}>
            <div className='row'>
                <div className='col-sm'>
                    <label for='name'>Namelabel>
                    <input
                        required='required'
                        type='text'
                        className='form-control'
                        id='name'
                        value={name}
                        onChange={(event) => setName(event.target.value)}
                    >input>
                div>
                <div className='col-sm'>
                    <label for='cost'>Costlabel>
                    <input
                        required='required'
                        type='text'
                        className='form-control'
                        id='cost'
                        value={cost}
                        onChange={(event) => setCost(event.target.value)}
                    >input>
                div>
                <div className='col-sm'>
                    <button type='submit' className='btn btn-primary mt-3'>
                        Save
                    button>
                div>
            div>
        form>
    );
};

export default AddExpenseForm;

What we're doing:

Importing AppContext and useContext as usual
Getting dispatch from our global state (line 6)
Creating an expense object, containing the name and the cost. This is what will get dispatched as the payload, and what we'll use to update the state. We're also using the uuid package we imported earlier to create an ID. This is used to identify a given expense (line 14).
We're dispatching an action, with a type and our payload. The type tells the reducer how to update the state, which we'll see in a minute (line 20)

How to Add a New Expense - Updating the reducer

That's it from the component side. You'll notice if you run this in the browser, nothing happens. Thats because we haven't updated our reducer to handle the action and update the state.

Jump into AppContext.js and update the reducer function with the following:

const AppReducer = (state, action) => {
    switch (action.type) {
        case 'ADD_EXPENSE':
            return {
                ...state,
                expenses: [...state.expenses, action.payload],
            };
        default:
            return state;
    }
};

What we're doing:

We're checking the type of the action (which we get from the action variable) (line 2)
Adding a new case to the switch statement called "ADD_EXPENSE" (line 3)
Returning a new state object with the new expense taking from the payload (which we get from the action variable) (line 4)

When we return something from a case statement, the reducer automatically updates the state and re-renders the components, almost like magic.

Now if you run the code, and add a new expense, you can see it gets added to the expense list!

How to Calculate `spent so far`

The next thing we'll look at is calculating how much the user has spent so far. To do this, we'll take a total of all the expenses the user has spent and display it on the UI.

Open up ExpenseTotal.js and update it with the following:

import React, { useContext } from 'react';
import { AppContext } from '../context/AppContext';

const ExpenseTotal = () => {
    const { expenses } = useContext(AppContext);

    const totalExpenses = expenses.reduce((total, item) => {
        return (total += item.cost);
    }, 0);

    return (
        <div className='alert alert-primary'>
            <span>Spent so far: £{totalExpenses}span>
        div>
    );
};

export default ExpenseTotal;

What we're doing:

importing our useContext and AppContext as usual
Taking the expenses from state (line 5)
Using the reduce function to get a total of all the costs and assigning this to a variable (line 7)
Displaying the variable in our JSX (line 13)

Now whenever the user adds an expense, this causes the state to update, which will cause all components connected to the context to re-render and update themselves with new values.

Go ahead and try this out in the browser.

How to Calculate `Remaining`

Now we'll look at calculating how much budget the user has left to spend.

To do this, we'll get the total costs of the expenses, and subtract it from the budget. If the user goes over budget, i.e the expenses are more than the budget, we want to display a red background (as opposed to a green background). Luckily Bootstrap gives us these nice things already.

Open up Remaining.js and update it with the following:

import React, { useContext } from 'react';
import { AppContext } from '../context/AppContext';

const Remaining = () => {
    const { expenses, budget } = useContext(AppContext);

    const totalExpenses = expenses.reduce((total, item) => {
        return (total = total + item.cost);
    }, 0);

    const alertType = totalExpenses > budget ? 'alert-danger' : 'alert-success';

    return (
        <div className={`alert ${alertType}`}>
            <span>Remaining: £{budget - totalExpenses}span>
        div>
    );
};

export default Remaining;

What we're doing

Importing expenses and budget from Context (line 5)
Getting the total cost of the expenses using the reduce function (line 7)
Creating a variable to store the CSS classname we want to display (depending on if the user has gone over the budget or not, line 11)
Using a template string to create our classes (line 14)
Rendering the remaining budget using a subtraction (line 15)

Now if you run the code in the browser, and add a bunch of expenses until the total goes over 2000, you'll see the "Remaining" component background turns to red!

How to Remove an Expense

The last thing we'll look at before getting into the challenges is to remove an expense.

When the user clicks the little cross beside an expense, we want to dispatch an action to remove it from state. When this happens, our ExpenseList will re-render with the removed expense.

Jump into ExpenseItem.js and update it with the following:

import React, { useContext } from 'react';
import { TiDelete } from 'react-icons/ti';
import { AppContext } from '../context/AppContext';

const ExpenseItem = (props) => {
    const { dispatch } = useContext(AppContext);

    const handleDeleteExpense = () => {
        dispatch({
            type: 'DELETE_EXPENSE',
            payload: props.id,
        });
    };

    return (
        <li className='list-group-item d-flex justify-content-between align-items-center'>
            {props.name}
            <div>
                <span className='badge badge-primary badge-pill mr-3'>
                    £{props.cost}
                span>
                <TiDelete size='1.5em' onClick={handleDeleteExpense}>TiDelete>
            div>
        li>
    );
};

export default ExpenseItem;

What we're doing:

Importing dispatch from Context, which allows us to dispatch a delete action (line 6)
Creating a function that gets called when the delete icon is clicked (line 8)
Dispatching an action. Our action contains the type (so the reducer knows how to update the state) and the payload. In this case we're passing the ID of this expense (which we get from props when we rendered the ExpenseList) (line 9)

If you try this in the browser, you'll see that nothing happens. Even though we're dispatching an action, we haven't implemented the reducer logic for this action type, so it doesn't know how to update the state.

Jump into AppContext.js and update the reducer function with the following:

const AppReducer = (state, action) => {
    switch (action.type) {
        case 'ADD_EXPENSE':
            return {
                ...state,
                expenses: [...state.expenses, action.payload],
            };
        case 'DELETE_EXPENSE':
            return {
                ...state,
                expenses: state.expenses.filter(
                    (expense) => expense.id !== action.payload
                ),
            };
        default:
            return state;
    }
};

All we're really doing here is adding a new case statement, to handle our DELETE_EXPENSE action. We're using the filter array method to remove the expense that has the ID which we received from the payload.

Now if you try this, you can remove an expense by clicking the delete icon. Notice how all the other components update as well. Nice!

Challenges to Try

Congrats on making it this far! Now its time for you to have a go at some challenges. Remember you can see how I've done it in the GitHub source code.

Allow the user to edit the budget

You'll notice that so far we have been using a hard coded value for the budget. Your first task is to add functionality that allows the user to edit the budget. Some tips to get started:

You will need to add a text input that allows the user to enter a value for their desired budget.
We store the budget in state, so you will need to dispatch an action with a new TYPE and a PAYLOAD that will update the state

Allow the user to search for an expense

If the user has many expenses, it will be difficult to find the one they are looking for. Add a way for the user to search for the expense by name. Some tips to get started:

You will need to add an input field which lets the user enter a value to search for.
You'll have to add something to the ExpenseList component that filters the list from context based on this search value.

Thanks for Reading!

How to Learn React in 2021: The 7 Skills You Need To Know

Reed — Wed, 06 Jan 2021 16:01:00 +0000

You want to learn React_—_the most in-demand JavaScript library in the world. But what steps do you need to take to get there? Let's walk through the seven skills you should learn to become a professional React developer.

As you're piecing together your React learning path, it's easy to feel overwhelmed and say, "It's impossible to learn it all. There are too many things I need to learn!"

To be successful with React, don't attempt to learn everything. Focus on learning the right things.

Let's break down the seven key skills that you need to focus on to build impressive applications and become an in-demand React developer.

Step 1: Become confident with the core fundamentals of HTML, CSS, and JavaScript

The first step in learning React is actually somewhat of a step backwards.

The building blocks of the web and every single webpage are HTML, CSS, and JavaScript. Any good React developer should know how to use them. React builds upon them to help you create apps that run on the web.

If you’ve built something with HTML, CSS and JavaScript already, you’re in a good place. For example, if you’ve built a complete landing page or a small website.

Out of the three technologies, React is most connected with JavaScript. React is JavaScript, with some added features. For that reason, you’ll need to have solid JavaScript skills.

What JavaScript concepts should you know for React?

Basic data structures: variables, objects, and arrays
Array methods and working with array data: .map(), .filter(), and .reduce()
Be very familiar with functions and a little bit with classes
Asynchronous JavaScript: promises, making HTTP requests with Fetch API, async/await syntax can help
The DOM: learn to create, select and modify HTML elements as well as their attributes
Object and array destructuring are helpful for working with data

Many developers claim that you should know "ES6/ES7/ES8/ESNext JavaScript" (in other words, the latest JavaScript features) to better learn React. Knowing more JavaScript can help, but new features can also serve as a distraction for new learners.

First, become confident with the JavaScript concepts I've listed above by building some small projects that require JavaScript. After that, you can take a look at some newer features of the language.

Step 2: Learn React fundamentals and React hooks

Once you’re confident with JavaScript, you’re ready to learn React and its core concepts.

These fundamentals are all React-specific and they exist to help us build applications with React, using patterns that JavaScript itself does not have.

What React fundamentals do you need to know?

How to structure JSX elements (and how it differs from plain HTML)
How to render (show) JSX elements and how to show or hide elements based on certain conditions
How to split JSX into components and how to reuse and organize those components to make our app interface.
How to pass data (+ JSX elements and components) to components using props and when to do so
How to store and update data within components using state and how to "lift state up" to other components
How to use event data in React and handle events from onClick, onChange, and onSubmit events (i.e. events from buttons, inputs, and forms)

As a 7-year old library, React’s features have changed over time. A question I’m often asked is what should you learn first: the old or the new syntax? At the end of 2018, React received a large update that included features called React Hooks.

Hooks were a great improvement. They made React apps simpler, more powerful, and allow us to write less code. What’s important for you to know is the five core React hooks.

What five React Hooks do you need to know most of all?

useState: to store and manage data within individual components
useEffect: to perform actions like HTTP requests or working with a browser API
useRef: to reference JSX elements
useContext: to access data from React Context to share data among components more easily [rather than passing props]
useReducer: to store and manage data across multiple components

There are more hooks than these 5, but the others are not needed as often. So yes, you should learn the latest React features. Jump into using hooks right away. They will be the basis of every React app you make.

Step 3: Learn to fetch data from both REST and GraphQL APIs

A React app is the frontend of a complete application. In every application, you will likely have both a React frontend, which the user interacts with as well as a backend that our React code interacts with. The backend is where we get our data from and do other things like authenticate our users.

There are two ways of working with data from a backend. The standard way of getting data is from what’s called a REST API. REST APIs are the most common form of API. And the newer way is from what’s called a GraphQL API.

You’ll encounter both types of API in your work, so become familiar with using React to interact with both.

Step 4: Learn to style your React apps with a component library or utility class library

Every React app needs styling for its appearance. One choice is to use plain CSS. You can write your own styles and put them in a separate style sheet.

But besides CSS, many React developers use what’s known as a component library for easier styling. A component library gives us reusable components that have their own pre-made styles. The most popular component library for React is Material UI. But there are many others you can choose from.

Developers also use tools that provide pre-made class names called utility class libraries. Unlike a component library, a utility class library comes with pre-made classes to style your elements.

You can style your app by applying classnames to each element. This removes the need to write any styles yourself. The most popular utility class library is Tailwind CSS.

You’ll encounter both of these as a developer, so become familiar with both a component library and a utility class library.

Step 5: Manage state in React with React context

What is state management? It’s the process of deciding where to locate data and how to work with it across our app. To manage state across your app’s components, use React Context.

React Context is a tool that’s built into the core React library and allows us to pass data across our app's components without using props. It helps us solve the problem of prop-drilling which involves passing props (data) down to components that are deeply nested into one another.

With React Context, we place a value on the context we create and then access it using the useContext() React hook.

What about Redux? Redux is a popular library for managing state in React apps. It is a far more complex tool than you need for most apps you’ll build. While Redux is still relied upon for very large applications, React Context will be enough for any app you make.

Plus you can get many of the benefits of Redux by combining React Hooks and React Context. This is a great advantage compared to learning an extra library.

Step 6: Learn a React router. In particular, react-router-dom

What is a router? Any website we visit has many pages we can browse by going forward or backward in our browser’s history. To create these different pages or routes in React, we need to use what’s called a router.

React itself does not come with its own router, so we’re going to need to use a third party library, one called react-router-dom.

react-router-dom is necessary for creating pages in our app, as well as navigating the user around each page. It lets us create links to different pages of our app and navigate to them or redirect them to other pages if we need.

What features of react-router-dom do you need to know?

How to create app routes using the , , and components
How to navigate users to different pages using the component and programmatically using the useHistory() hook
How to create dynamic routes using the path prop (i.e. ) and get the path's value using the useParams() hook
How to redirect users from protected content using the component (see number 7)

Step 7: Learn patterns for authentication in React

Authenticated users are people who have signed in to use our app. And we want to give those users access to different things. For that reason, authentication goes hand in hand with routing. This is because authenticated users should be able to see certain pages that unauthenticated users cannot.

What do you need to know about authentication as a React developer?

There is one main thing. You should learn how to show certain content to authenticated users and hide that content from unauthenticated ones.

In review, these are all the core skills you need to have as a React developer, capable of building complete applications and working as a hired frontend developer.

Beyond these 7 skills, note that there are many that can deepen your understanding as a developer. For example, learning more about browsers, HTTP, and APIs, to name a few. But if you follow all these steps, you’ll have a solid understanding of React and be able to build applications of any scale.

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

Learn React Context in 5 Minutes - A Beginner's Tutorial

freeCodeCamp — Fri, 08 Nov 2019 21:47:33 +0000

By Bob Ziroll

React's Context API has become the state management tool of choice for many, oftentimes replacing Redux altogether. In this quick 5-minute tutorial, you'll see an introduction to what Context is and how to use it!

If you want a proper introduction to this subject, you can join the waitlist for my upcoming advanced React course, or if you're still a beginner, check out my free introductory course on React.

Consider this tree, in which the bottom boxes represent separate components:

We can easily add state to the bottom components, but until now the only way to pass data to a component's sibling was to move state to a higher component and then pass it back down to the sibling via props.

If we later find out that the sibling of the component with state also needs the data, we have to lift state up again, and pass it back down:

While this solution does work, problems begin if a component on a different branch needs the data:

In this case, we need to pass state from the top level of the application through all the intermediary components to the one which needs the data at the bottom, even though the intermediary levels don't need it. This tedious and time-consuming process is known as prop drilling.

This is where Context API comes in. It provides a way of passing data through the component tree via a Provider-Consumer pair without having to pass props down through every level. Think of it as the components playing Catch with data - the intermediary components might not even "know" that anything is happening:

To demonstrate this, we will create this funky (and super useful) day-to-night switching image.

If you want to see the full code, be sure to check out the Scrimba playground for this article.

Create Context

To begin, we create a new Context. As we want the entire app to have access to this, we go to index.js and wrap the app in ThemeContext.Provider.

We also pass the value prop to our Provider. This holds the data we want to save. For now, we just hardcode in 'Day'.

import React from "react";
import ReactDOM from "react-dom";
import ThemeContext from "./themeContext";

import App from "./App";

ReactDOM.render(
  <ThemeContext.Provider value={"Day"}>
    <App />
  ThemeContext.Provider>,
  document.getElementById("root")
);

Consuming Context with contextType

Currently, in App.js, we are simply returning the component.

import React from "react";
import Image from "./Image";

class App extends React.Component {
  render() {
    return (
      <div className="app">
        <Image />
      div>
    );
  }
}

export default App;

Our goal is to use Context to switch the classNames in Image.js from Day to Night, depending on which image we want to render. To do this, we add a static property to our component called ContextType and then use string interpolation to add it to the classNames in the component.

Now, the classNames contain the string from the value prop. Note: I have moved ThemeContext into its own file to prevent a bug.

import React from "react";
import Button from "./Button";
import ThemeContext from "./themeContext";

class Image extends React.Component {
  render() {
    const theme = this.context;
    return (
      <div className={`${theme}-image image`}>
        <div className={`${theme}-ball ball`} />
        <Button />
      div>
    );
  }
}

Image.contextType = ThemeContext;

export default Image;

Context.Consumer

Unfortunately, this approach only works with class-based components. If you've learned about Hooks in React already, you'll know we can do just about anything with functional components these days. So for good measure, we should convert our components into functional components and then use ThemeContext.Consumer component to pass info through the app.

This is done by wrapping our elements in an instance of and within that (where the children go), providing a function which returns the elements. This uses the "render prop" pattern where we provide a regular function as a child that returns some JSX to render.

import React from "react";
import Button from "./Button";
import ThemeContext from "./themeContext";

function Image(props) {
  // We don't need this anymore
  // const theme = this.context

  return (
    <ThemeContext.Consumer>
      {theme => (
        <div className={`${theme}-image image`}>
          <div className={`${theme}-ball ball`} />
          <Button />
        div>
      )}
    ThemeContext.Consumer>
  );
}

// We don't need this anymore
// Image.contextType = ThemeContext;

export default Image;

Note: We also need to wrap the

Tips to Enhance the Performance of Your React App

freeCodeCamp — Tue, 27 Aug 2019 13:46:33 +0000

By Shifa Martin

ReactJS is an open-source framework that facilitates the development of UI interfaces for web and mobile applications. Developers globally use the framework to build state-of-the-art applications which subsequently generate revenues as well as expand the audience for businesses.

However, building a great UI with React isn’t enough, You’ve got to add that extra glitter to make the app more polished, functional and remarkably better than the competition.

This is exactly what I’m going to help you with as I describe some key methods to increase performance in React apps.

1. Making good use of Identities

When building mobile apps with React, it is possible to wrap functions and variables with React.useMemo. Doing so provides the ability to memoize them so they remain identical for renders in the future.

When functions and variables are not memoized, any references to them might vanish from future renders. Memoizing helps in negating wasteful processes and operations in every situation where you’d leverage functions and variables.

Example:

Say, we’re preparing a custom hook for a list of urls as arguments. Using the hook, we can collect them into an array of promise objects and resolve them with Promise.all. The results of this accumulation will enter the state and be passed the app component once done. The list of promises now map over the urls array from where it fetches the urls.

import React from 'react'
import axios from 'axios'

export const useApp = ({ urls }) => {
  const [results, setResults] = React.useState(null)

  const promises = urls.map(axios.get)

  React.useEffect(() => {
    Promise.all(promises).then(setResults)
  }, [])

  return { results }
}

const App = () => {
  const urls = [
    'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?terms=a',
    'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?terms=b',
    'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?terms=c',
  ]

  useApp({ urls })

  return null
}

export default App

Since we want to obtain data from 3 urls here, only 3 requests are supposed to be sent out, one for each url. However, when looking at it through the inspect element feature on Google Chrome, we find that 6 requests are sent instead of the supposed 3.
This happens because the urls argument did not retain its previous identity. When the app is re-rendered, it’s instantiating a new array each time, as React treats it as a different value.

To fix this problem, we can use React.useMemo as previously mentioned. When using React.useMemo, the array of promise objects won’t recompute in each new render unless the array with the list of urls changes. As long as it stays the same, the identities remain.

Here’s what happens when applying React.useMemo to this example:

const useApp = ({ urls }) => {
  const [results, setResults] = React.useState(null)

  const promises = urls.map((url) => axios.get(url))

  React.useEffect(() => {
    Promise.all(promises).then(setResults)
  }, [])

  return { results }
}

const App = () => {
  const urls = React.useMemo(() => {
    return [
      'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?terms=a',
      'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?terms=b',
    ]
  }, [])

  const { results } = useApp({ urls })

  return null
}

It will send 6 requests even now since we’ve only memoized the urls array. The promises variables are also instantiating when running the hook. So in order to send only 3 requests, we also have to memorize the promises variables as well.

const promises = React.useMemo(() => {
  return urls.map((url) => axios.get(url))
}, [urls])

After memoizing both the urls array and the promises variables, this is what we get:

2. Merging Props to Children

At times, developers get into situations where they prefer merging a prop with children before rendering. To facilitate the same, React allows viewing the props to all react elements including others, and also allows exposing their key.

So developers can choose to wrap the children element with a newer one, and insert new props there or they can simply merge the props with React.

Say, we have an app component that uses a useModal and offers the ability to manage modals by using controls such as open, close, opened and activated. Before merging props to children, we can pass them to a VisbilityControl component which provides some additional functionality.

import React from 'react'

const UserContext = React.createContext({
  user: {
    firstName: 'Kelly',
    email: 'frogLover123@gmail.com',
  },
  activated: true,
})

const VisibilityControl = ({ children, opened, close }) => {
  const ctx = React.useContext(UserContext)
  return React.cloneElement(children, {
    opened: ctx.activated ? opened : false,
    onClick: close,
  })
}

export const useModal = ({ urls } = {}) => {
  const [opened, setOpened] = React.useState(false)
  const open = () => setOpened(true)
  const close = () => setOpened(false)

  return {
    opened,
    open,
    close,
  }
}

const App = ({ children }) => {
  const modal = useModal()

  return (
    
      
      {children}
    
  )
}

const Window = ({ opened }) => {
  if (!opened) return null
  return (
    
      I am a window
    
  )
}

export default () => (
  
    
  
)

Using Visibility control allows developers to ascertain whether the control activated is true before allowing the control opened to be used by children. In case the Visibility Control feature is used via a secret route, there’s an option to prevent unactivated users from accessing the content.

3. Making a larger reducer

It is possible to combine to or more reducer to make a single, much larger reducer that can help boost a react app.

Say, you think of building a large app that provides access to a wide variety of small services. How would you go about the development of such an app?

There are two options:

We can give each microservice within the app a separate part of its own from where its state and context can be managed directly.

Or we can combine all states into a single large state and manage all of them within the same environment.

The first approach seems to highly tedious, so obviously, the second one is the way to go.

Now we have three reducers to combine -

frogsreducer.js, authreducer.js and finally, ownersreducer.js.

Let's start with authReducer.js

const authReducer = (state, action) => {
  switch (action.type) {
    case 'set-authenticated':
      return { ...state, authenticated: action.authenticated }
    default:
      return state
  }
}

export default authReducer

ownersReducer.js

ownersReducer.js

const ownersReducer = (state, action) => {
  switch (action.type) {
    case 'add-owner':
      return {
        ...state,
        profiles: [...state.profiles, action.owner],
      }
    case 'add-owner-id':
      return { ...state, ids: [...state.ids, action.id] }
    default:
      return state
  }
}

export default ownersReducer

frogsReducer.js

const frogsReducer = (state, action) => {
  switch (action.type) {
    case 'add-frog':
      return {
        ...state,
        profiles: [...state.profiles, action.frog],
      }
    case 'add-frog-id':
      return { ...state, ids: [...state.ids, action.id] }
    default:
      return state
  }
}

export default frogsReducer

Now we can put all three into the main app file and define their state:

App.js

import React from 'react'
import authReducer from './authReducer'
import ownersReducer from './ownersReducer'
import frogsReducer from './frogsReducer'

const initialState = {
  auth: {
    authenticated: false,
  },
  owners: {
    profiles: [],
    ids: [],
  },
  frogs: {
    profiles: [],
    ids: [],
  },
}

function rootReducer(state, action) {
  return {
    auth: authReducer(state.auth, action),
    owners: ownersReducer(state.owners, action),
    frogs: frogsReducer(state.frogs, action),
  }
}

const useApp = () => {
  const [state, dispatch] = React.useReducer(rootReducer, initialState)

  const addFrog = (frog) => {
    dispatch({ type: 'add-frog', frog })
    dispatch({ type: 'add-frog-id', id: frog.id })
  }

  const addOwner = (owner) => {
    dispatch({ type: 'add-owner', owner })
    dispatch({ type: 'add-owner-id', id: owner.id })
  }

  React.useEffect(() => {
    console.log(state)
  }, [state])

  return {
    ...state,
    addFrog,
    addOwner,
  }
}

const App = () => {
  const { addFrog, addOwner } = useApp()

  const onAddFrog = () => {
    addFrog({
      name: 'giant_frog123',
      id: 'jakn39eaz01',
    })
  }

  const onAddOwner = () => {
    addOwner({
      name: 'bob_the_frog_lover',
      id: 'oaopskd2103z',
    })
  }

  return (
    <>
      
        
        
      
    
  )
}
export default () => 

This is what it looks like combining all three reducers into one large reducer, along with rootReducer

function rootReducer(state, action) {
  return {
    auth: authReducer(state.auth, action),
    owners: ownersReducer(state.owners, action),
    frogs: frogsReducer(state.frogs, action),
  }

This is what it looks like combining all three reducers into one large reducer, along with rootReducer.

Using Sentry for Analyzing Errors

Any mobile app development project can benefit greatly from Sentry. It provides everything a developer needs to handle errors and exceptions when building apps with React. Sentry identifies all errors and displays them at one central location so they can be accessed and analyzed all at once.

Getting started with Sentry on React is easy. Just use npm install @sentry/browser and set it up. Once done, developers can log in at sentry.io and analyze all error reports of a project on a single dashboard.

The error reports from sentry are incredibly detailed. They provide all sorts of important information which include the user’s device information, browser, URL, stack trace, how the error was handled, source code, IP address, breadcrumbs to trace the source of error, the error function name and much more.

5. Using Axios for HTTP requests

Though Axios is commonly used for HTTP requests. I felt it is important to mention this point because it's actually not common for developers to use other request libraries such as fetch for React apps.

Windows.fetch provides no support for Internet Explorer 11 (most don’t really care though). But for what it's worth, Axios does work there as well and offers the ability to cancel requests in mid-flight.

Final Words

The 5 mentioned methods can greatly help speed up your React app. It helps developers, the business you’re in and of course, those who’d be using it eventually. But honestly, the success of your React App mostly depends on those who work on them.

As a consumer, you’d want better performance from your app, so it is what denotes success. As a developer, these methods could make your app easier to develop, and efficiency is key to being more productive.

ValueCoders is an expert IT outsourcing company for software development. If you are looking for offshore React programmers or hire Android developers, feel free to get in touch.

Also, I hope this post helps you learn new things and get a deeper insight into what goes into making the perfect react application.

Using the React Context API - getting started

freeCodeCamp — Sat, 08 Sep 2018 16:54:00 +0000

By Scott Spence

Let's use the React Context API to change theme in an app!

But first, some context! ?

Ok terrible puns aside let's have a look at what the React Context API is for and what it does. There's a great one liner from the React docs...

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Or in other words, you can use the React Context API to avoid prop drilling if you need more detail on the concept then please do check out the links provided.

I've previously gone over implementing the React Context API in my Gatsby blog which I documented as I did it; you can see how that went here.

Explain the Context API to me.

A great resource on explaining the API can be found from @leighchalliday with a great usecase on the subject.

What we're doing...

For this post we're going to extend the example we created for styled-components getting started as it has the majority of the code we'll need to get started with the React Context API.

We're going to extend that example to manage the theme state of the example application.

So in summary:

Scaffold out basic CreateReact App
Use styled-components ? for styling
Add themes to switch between with the React Context API
Use the React Context API!

What we'll need...

All we'll be needing is an internet connection and a modern web browser! Because we're going to do all of this online in the awesome CodeSandbox!

If you have a GitHub account or not, CodeSandbox will let you get started coding straight away!

Versions:

This guide is being used with the following dependency versions.

react: 16.4.2
react-dom: 16.4.2
react-scripts: 1.1.4
styled-components: 3.4.5

Let's start

So let's go over theming the basic create react app again, this time instead of adding state into to the component we will use the React Context API to manage the state for us. There will be people that will argue that this is a bit overkill for a theme switch but it is given as an example of when to use the Context API in the React documentation so I will let you decide on the validity of that point. For this example, I hope it will give you a clearer picture of how to use the Context API in an application.

Dependencies

Open a React CodeSandbox and add styled-components as a dependency:

File structure

Another area for bikeshedding is file structure, in this scenario we're adding folders for components, contexts and the theme please feel free to structure your files how you see fit, this is how we're going to do it for this example ❤️

Add the directories into the src folder so we can add in some components, the file structure should look something like this:

context-demo/
├─ public/
├─ src/
│  └─ components/
│  └─ contexts/
│  └─ theme/
└─ package.json

Scaffold out a basic Create React App

Ok, so, what we're going to do is add in an App.js component to the components folder then use that in the src/index.js file.

The App.js component can be a stateless functional component as for this example as we're going to be handling state with the Context API.

Here you can see my sketchy typing as I create the directories and add in the App.js component.

We can then remove the style.css file and reference in src/index.js as we're going to be styling with styled-components ? and then use our App.js component:

Ok, so the reason why I have abstracted the App.js component out of the src/index.js file is so that when we come to using the Context API we can add it to the highest level in our app, which is src/index.js.

What about the rest?

So this isn't really the Create React App, as we're using CodeSandbox instead, I have gone over the basic styling used in the styled-components getting started post so it's time to refer to that to mimic the styles we need.

That means what we're going to do, rather than go into depth on the styling of each of the component parts that make up the basic Create React App appearance, we're going to re-use components, so there's going to be a bit of copy pasting involved now.

The Create React App boilerplate code has one file that we go over styling in the styled-components getting started post which is the App.js file, the others are left or deleted, the basic style of App.js is:

App.css

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Use styled components for styling

Now we're going to recreate the styles from the App.css file with styled-components, let's list them out here and go through them:

AppWrapper
AppHeader
AppTitle
rotate360
AppLogo
# We're adding our own styles for
AppIntro
Underline
StyledHyperLink
Button

AppWrapper is the top level wrapper which in a larger component could be used for layout with CSS Grid or Flexbox, in our case we're going to align the text center.

Straightforward enough, right? Now the majority of the rest of the components will use the styled-components ThemeProvider which is what we're going to pass our theme to from the Context API.

Add themes to switch between with the React Context API

Ok, we need to define some themes to pass to the ThemeProvider, we're going to define several theme aspects we want to change, these are going to be:

primary; // colour
secondary; // colour
danger; // colour
fontHeader; // font
fontBody; // font

Create a file to contain the theme object in the theme directory and call it globalStyle.js and add in the following:

import { injectGlobal } from 'styled-components';

export const themes = {
  theme1: {
    primary: '#ff0198',
    secondary: '#01c1d6',
    danger: '#e50000',
    fontHeader: 'Old Standard TT, sans, sans-serif',
    fontBody: 'Nunito, sans-serif',
  },

  theme2: {
    primary: '#6e27c5',
    secondary: '#ffb617',
    danger: '#ff1919',
    fontHeader: 'Enriqueta, sans-serif',
    fontBody: 'Exo 2, sans, sans-serif',
  },

  theme3: {
    primary: '#f16623',
    secondary: '#2e2e86',
    danger: '#cc0000',
    fontHeader: 'Kaushan Script, sans, sans-serif',
    fontBody: 'Headland One, sans-serif',
  },
};

injectGlobal`
  @import url('
    https://fonts.googleapis.com/css?family=
    Old+Standard+TT:400,700|
    Nunito:400,700'|
    Enriqueta:400,700|
    Exo+2:400,700|
    Kaushan+Script:400,700|
    Headland+One:400,700|
  ');

  body {
    padding: 0;
    margin: 0;
  }
`;

Ok, so nothing really happening there apart from setting up the styles for use later.

You will notice that injectGlobal is being used here, this is where we're setting the fonts for use throughout the app, injectGlobal should be used once in an app to set global styles like this.

Onwards! Let us now focus on getting the basic app styles into the App.js component. We can now start using the ThemeProvider in App.js. To do this, for now, to get some visual feedback we're going to apply one of the themes from the themes object in globalStyle.js this is so, as we are adding in components we can see the theme being applied.

We can do this now with the AppHeader which is a styled div:

const AppHeader = styled.div`
  height: 12rem;
  padding: 1rem;
  color: ${({ theme }) => theme.dark};
  background-color: ${({ theme }) => theme.primary};
`;

You will notice here that we're beginning to use the styled-components, theme props but, if we paste this code in now there won't be any change until the ThemeProvider is passed the theme object so we're going to wrap App.js with the ThemeProvider component so that any component encapsulated by the ThemeProvider is able to receive theme props.

AppTitle is going to be a h1 so:

const AppTitle = styled.h1`
  font-family: ${({ theme }) => theme.fontHeader};
`;

For the spinning React logo we can use the asset used previously in the styled-components getting started example

We can add it in with the imports at the top of the App.js component and add it into the AppLogo styled component as an img tag:

const logo = `https://user-images.githubusercontent.com/
    234708/37256552-32635a02-2554-11e8-8fe3-8ab5bd969d8e.png`;

The keyframes helper will need to be imported alongside the ThemeProvider for the animation on the react logo.

const rotate360 = keyframes`
  from { 
    transform: rotate(0deg); 
  }
  to { 
    transform: rotate(360deg); 
  }
`;

const AppLogo = styled.img`
  animation: ${rotate360} infinite 5s linear;
  height: 80px;
  &:hover {
    animation: ${rotate360} infinite 1s linear;
  }
`;

Shared components

Shared components are covered in the styled-components getting started guide if you need more information, for this example we're going to bring in the final couple of components as shared ones for the StyledHyperLink and Button in src/Shared.js add the following:

src/Shared.js

import styled, { css } from 'styled-components';

export const Button = styled.button`
  padding: 0.5rem 1rem;
  margin: 0.5rem 1rem;
  color: ${({ theme }) => theme.primary};
  font-size: 1rem;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  border: 2px solid ${props => props.border};
  background-color: Transparent;
  text-transform: uppercase;
  border-radius: 4px;
  transition: all 0.1s;
  &:hover {
    transform: translateY(1px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  }
  ${props =>
    props.primary &&
    css`
      background: ${({ theme }) => theme.primary};
      border: 2px solid ${({ theme }) => theme.primary};
      color: white;
    `};
  ${props =>
    props.danger &&
    css`
      background: ${({ theme }) => theme.danger};
      border: 2px solid ${({ theme }) => theme.danger};
      color: white;
    `};
  &:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  }
`;

export const StyledHyperLink = styled.a`
  cursor: pointer;
  &:visited,
  &:active {
    color: ${({ theme }) => theme.primary};
  }
  &:hover {
    color: ${({ theme }) => theme.secondary};
  }
  color: ${({ theme }) => theme.primary};
`;

Then import the components like any other:

The last three components for now, AppIntro, Underline and StyledHyperLink:

const AppIntro = styled.p`
  color: ${({ theme }) => theme.dark};
  font-size: large;
  code {
    font-size: 1.3rem;
  }
  font-family: ${({ theme }) => theme.fontBody};
`;

const Underline = styled.span`
  border-bottom: 4px solid ${({ theme }) => theme.secondary};
`;

const StyledHyperLink = SHL.extend`
  text-decoration: none;
  font-family: ${({ theme }) => theme.fontBody};
  color: ${({ theme }) => theme.fontDark};
`;

Add them in under the AppLogo styled component and then we can add the rest of the components into the App function return, so, ready for another copy pasta? Here:


  Bootstrapped with{' '}
  
    <code>
      <StyledHyperLink
        href={`https://github.com/facebook/create-react-app`}
        target="_blank"
        rel="noopener"
      >
        create-react-app
      StyledHyperLink>
    code>
  .

<AppIntro>
  Components styled with{' '}
  <Underline>
    <code>
      <StyledHyperLink
        href={`https://www.styled-components.com`}
        target="_blank"
        rel="noopener"
      >
        styled-components
      StyledHyperLink>
    code>
  Underline>{' '}
  <span role="img" aria-label="nail polish">
    ?
  span>
AppIntro>
<AppIntro>
  Fonts picked with{' '}
  <Underline>
    <code>
      <StyledHyperLink
        href={`https://fontjoy.com/`}
        target="_blank"
        rel="noopener"
      >
        fontjoy.com
      StyledHyperLink>
    code>
  Underline>
AppIntro>
<Button>Normal ButtonButton>
<Button primary>Primary ButtonButton>
<Button danger>Danger ButtonButton>

Sorry for the code wall! Right paste that in under the closing tag and we should have the base of what we're going to theme!

Ok? How's it looking?

Now we have a basic React app that uses styled-components!

Use the React Context API

Now for the main event! Here we're going to cover:

Making the theme context.

Using the context API with a component.

Consuming the Context API in multiple components.

So, passing state needlessly through components is what we can use the Context API to avoid. If we take a look at the styled-components getting started example we can see the state being managed in the App.js component and the handleThemeChange function has to be passed to the ThemeSelect component much the same way as any props would need to be passed down. That is a simplified example but it's quite easy to imagine if that component lived on a footer component or a menu item there would be several other components that would need to have the state passed through them that would not actually need that state or props. Make sense?

example

               {/* state begins here */}
            {/* through here */}
        {/* and here */}
       {/* to be used here */}
    
  
  <Footer/>

Add the site theme context

In our src/contexts/ directory we're going to make our SiteThemeContext.js, import React and define and export our context:

import React from 'react';

export const SiteThemeContext = React.createContext();

So what is a context?

A context is made up of two things, a provider and a consumer, you have a single provider which will sit up as high as possible in the component tree so that multiple consumers can get the state and props from the provider.

Hopefully you recall the point at which we abstracted the function App component out of the src/index.js file, this is so we could add in the context provider at the highest level of the app, in the src/index.js file. This means that any consumer within the app, no matter how deep into the component tree it is, it can get the state and props from that top level.

Now to create a provider, the provider is a regular React component, so:

import React from 'react'

export const SiteThemeContext = React.createContext()

export class SiteThemeProvider extends React.Component {
  render() {
    return (
      <SiteThemeContext.Provider value={}>
        {this.props.children}
      SiteThemeContext.Provider>
    )
  }
}

What is being returned by is the and the children of that component, the one prop you have to provide the the provider is a value prop. This is the variable that the consumer has access to. The consumer being (more on this shortly).

So what we can do now is have what is passed into value be an object value={{}} so it can store multiple properties of the state and the functions that are defined in SiteThemeContext.

The state for the context needs to be the theme so we need to import the theme from src/theme/globalStyle and add that to the state, we're going to default the theme (and state) to theme1 and add a copy of that into the value prop by spreading into state ...❤️, it should look like this:

import React from 'react';
import PropTypes from 'prop-types';

import { themes } from '../theme/globalStyle';

export const SiteThemeContext = React.createContext();

export class SiteThemeProvider extends React.Component {
  state = {
    theme: themes['theme1'],
  };

  render() {
    return (
      <SiteThemeContext.Provider
        value={{
          ...this.state,
        }}>
        {this.props.children}
      SiteThemeContext.Provider>
    );
  }
}

Ok, it's been a while since I've added a gif, time for another one!

And bring in the themes and add state:

Now we can add in a function to the provider to change the theme state based on what has been selected via the handleThemeChange event value:

handleThemeChange = e => {
  const key = e.target.value;
  const theme = themes[key];
  this.setState({ theme });
};

This can then be consumed by any provider that wants to use it, we're going to need to add it into the value prop, like this:

import React from 'react';
import PropTypes from 'prop-types';

import { themes } from '../theme/globalStyle';

export const SiteThemeContext = React.createContext();

export class SiteThemeProvider extends React.Component {
  state = {
    theme: themes['theme1'],
  };

  handleThemeChange = e => {
    const key = e.target.value;
    const theme = themes[key];
    this.setState({ theme });
  };

  render() {
    return (
      <SiteThemeContext.Provider
        value={{
          ...this.state,
          handleThemeChange: this.handleThemeChange,
        }}>
        {this.props.children}
      SiteThemeContext.Provider>
    );
  }
}

Ok, that is the site theme context component covered, pretty straight forward, right?

What I should mention is that the e in the handleThemeChange function is going to be the event from the theme select box that we're about to make.

Let's go through adding in the function and adding that to the state:

And now we can add the theme provider to src/index.js so anything lower in the dependency tree can access it via a consumer.

Add the theme select

Now we want a want to call the handleThemeChange function that is part of the SiteThemeProvider via the SiteThemeContext! I'm sure this all making perfect sense right now (?) so let's get right in there and define the component that we're going to use to consume the SiteThemeContext.Provider with a ThemeSelect component!

In the src/components directory add a new ThemeSelect.js component, this is where we are going to consume the site theme context with a consumer.

The child of a consumer isn't a component it's a function, so what we're going to need to do is have the theme select inside the return of that function.

Let's first set up the styled-components that will make up the select, which is a select box, some options and a wrapper.

First we'll do it without the consumer then we'll add it in.

ThemeSelect.js

import React from 'react';
import styled from 'styled-components';

import { themes } from '../theme/globalStyle';

const SelectWrapper = styled.div`
  margin: 0rem 0.5rem 0rem 0.25rem;
  padding: 0rem 0.5rem 0rem 0.25rem;
`;

const Select = styled.select`
  margin: 1.5rem 0.5rem;
  padding: 0.25rem 0.5rem;
  font-family: ${({ theme }) => theme.fontBody};
  border: 2px solid ${({ theme }) => theme.secondary};
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  background: ${({ theme }) => theme.foreground};
  border-radius: 4px;
`;

export const SelectOpt = styled.option`
  font-family: ${({ theme }) => theme.fontBody};
`;

const ThemeSelect = props => {
  return (
    <SelectWrapper>
      <Select>
        {Object.keys(themes).map((theme, index) => {
          return (
            <SelectOpt key={index} value={theme}>
              Theme {index + 1}
            SelectOpt>
          );
        })}
      Select>
    SelectWrapper>
  );
};

export default ThemeSelect;

So from this we can list the this themes available to us in the themes object. But that's it, the function to handle the theme change lives on the SiteThemeProvider.

Back to the SiteThemeContext.Consumer as I mentioned earlier the child of a consumer is a function () => () the first section is the value from the provider () so let's take a quick look at what we've previously defined in the provider:

value={{
  ...this.state,
  handleThemeChange: this.handleThemeChange
}}

Available from SiteThemeContext.Provider is the state and a function so any of those items we can extract and pass to the provider, or to put it another way the consumer can access those values.

Here we can use destructuring to pull the handleThemeChange function we need to change the theme.

import React from 'react'

import { SiteThemeContext } from '../contexts/SiteThemeContext'

const ThemeSelect = props => {
  return (
    <SiteThemeContext.Consumer>
      {({ handleThemeChange }) => ()}
    SiteThemeContext.Consumer>
  )
}

export default ThemeSelect

Currently this isn't going to change the theme because we have that hardcoded into the styled-components ThemeProvider, what we want to do is use a consumer for the currently selected theme in the SiteThemeContext.

Before that we'll also need to add in the onChange event we want to use to pass the event (e) to the handleThemeChange function on SiteThemeContext.

Then in the App component we can import our to consume the theme on the SiteThemeContext state and pass that to the styled-components ThemeProvider.

Want to know more?

As mentioned at the start of this article a great resource is @leighchalliday and his YouTube channel where you can find his great usecase for the React Context API.

There's also the React community on spectrum and styled-components on spectrum.

Example code of the walkthrough is available on CodeSandbox.

Thanks for reading

If there is anything I have missed, or if there is a better way to do something then please let me know.

Follow me on Twitter or Ask Me Anything on GitHub.

You can read other articles like this on my blog.

React context - freeCodeCamp.org

How to Use React's Context API – Tutorial with Examples

What You'll Learn in This Article

Source Code

What is the React Context API and When Should You Use It?

React Context API Example — Light and Dark Mode UI Theme

The passing-down-a-prop solution

Context API To The Rescue

Creating a context

Providing a context

How to Create Multiple React Contexts

How to Prevent the React Context Re-render Issue

1. Use Multiple React Contexts

2. Split the Component and Pass the Needed Value

3. One Component with React.useMemo() Inside

React Context API vs Redux

Why Context API is good for small-to-medium-sized apps:

Why Redux is good for larger, more complex applications:

In summary:

Thank you for reading!

Free React Hooks Course

How to Use React Context in Your Project – Beginner's Guide

What is React Context?

How is React Context Different from Prop Threading?

What is Prop Drilling?

When to choose React Context

What are the Use Cases for React Context API?

How to use React Context API

Step #1 - Create a Context

Step #2 - Wrap your App with Context Provider

Step #3 - Consume the Context in Components

The three Important Parts of the React Context API.

Provider

Context

Consumer

How to Create a Theme-Switching App using React Context.

Step #1

Walkthrough:

Step #2

Themed Component

Walkthrough:

Step #3

Walkthrough:

Conclusion

Resources

How to Avoid Prop Drilling in React

What is Prop Drilling?

What is an Elongated Prop?

What Causes Prop Drilling?

How to Use the React Context API in Your Projects

The Problem with Passing Props

How the Context API Works

How to Get Started with the Context API

1. Create a Context Object

2. Wrap Components with a Provider

3. Consume the Context

Use Cases of Context API

Best Practices for Context API

Recap

Conclusion

How to Avoid Prop Drilling with the React Context API

What is Prop Drilling?

What is the React Context API?

How to Use the React Context API

How to create context

How to provide the context to the components that need it

How to consume the context

Conclusion

React Context for Beginners – The Complete Guide (2021)

Table of Contents

What is React context?

When should you use React context?

What problems does React context solve?

How do I use React context?

What is the useContext hook?

You may not need context

Does React context replace Redux?

React context caveats

Conclusion

Become a Professional React Developer

3. One Component with `React.useMemo()` Inside

How to Create the `Remaining` Component

How to Calculate `spent so far`

How to Calculate `Remaining`