Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Context API

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

What Is the Context API?

3:13 with Laura Coronel

React provides a way to pass data to components without having to pass props manually at every single level, or reach for a state management library like Redux. Context is mainly used when certain data needs to be accessed by many components at different nesting levels.

Prerequisites

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    Hi, I'm Laura, a JavaScript teacher here at Treehouse. 0:09
    In this workshop, I'll teach you a more efficient and maintainable way 0:14
    to pass data to all the components of your React app using the context API. 0:19
    In the typical React data flow, components communicate with each other via props. 0:26
    For example, a parent component can pass data from state down 0:31
    to a child component through props. 0:35
    When a component that's nested several levels deep in the component tree 0:38
    needs access to data from the top level component. 0:43
    It's common to pass the data down to each component in the hierarchy 0:47
    until the child component receives its desired props. 0:51
    Oftentimes, the intermediary components don't need or care about that data, 0:56
    but they still get props passed to them with the sole purpose of passing 1:02
    that data down to components one or several more levels deep. 1:07
    By the time the child components receive their desired props, 1:13
    you may have passed a series of props down to two, three, or more components. 1:17
    What's worse, imagine trying to access state in a component that's six or 1:23
    ten levels deep. 1:28
    This cascade of props is often referred to as prop drilling. 1:31
    While it's not completely discouraged or considered a bad practice, 1:36
    prop drilling could become tedious, difficult to manage, and error prone. 1:41
    To get around prop drilling and help prevent state management issues, 1:48
    developers often turn to libraries like Recoil or Redux. 1:53
    Both help maintain and manage application state in a more scalable and 1:58
    predictable way. 2:03
    Now, in some cases, 2:05
    using a library like Redux just to avoid prop drilling might be an overkill. 2:07
    So React offers a built-in way to do this without having to reach for 2:13
    a state management tool. 2:18
    The context API provides a way to pass data to components without 2:21
    having to pass props manually at every single level. 2:26
    In fact, libraries like Redux and React Router use context behind 2:31
    the scenes as a way to communicate between components. 2:36
    This workshop assumes that you know the basics of React, 2:40
    working with components, and tools like Create React App, and NPM or Yarn. 2:44
    If you're not sure what that means, I suggest that you take the courses listed 2:51
    in the teacher's notes first, then come back and learn how to use the context API. 2:56
    Up next, we'll begin by determining where it's best to leverage context. 3:01
    Then we'll initialize a new context and implement the API into the React project. 3:07

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up