How Context Works2:56 with Guil Hernandez
Context is mainly used when certain data needs to be accessed by many components at different nesting levels.
In this workshop, we're going to be working with the scoreboard application 0:00 built in a previous React course. 0:03 To follow along with me, download the project files and 0:05 open them in your favorite text editor. 0:07 I'm using Visual Studio Code which has integrated terminal. 0:09 Once we have the project open, run npm install to install the project 0:12 dependencies, then run npm start to run and launch the app in your browser. 0:16 In the scoreboard app, the player state and event handlers like handleScoreChange, 0:21 handleAddPlayer, and handleRemovePlayer live and the main app component. 0:26 And child components like Player, 0:31 Counter, Stats, and AddPlayerForm, all need access to the player state. 0:33 Stats, for example, calculates the total players and 0:39 the total points from the current state. 0:42 And Counter displays a player's score from a player object and state. 0:44 Now, the handle scoreChange function gets called down the counter component, 0:50 which is nested three levels deep from app. 0:54 In a similar way, handle removePlayer gets invoked in the player component, 0:57 and handle addPlayer in the addPlayer form component. 1:03 Currently, the player state is distributed through the component tree 1:07 from one component to the other via a series of props. 1:11 Likewise, the props passing the functions act as callbacks 1:15 that get invoked at a later time through some interaction with a child component. 1:19 So there's some prop drilling happening in the app. 1:24 In between components like PlayerList, Header, and Player receive and 1:26 are made aware of data they do not need. 1:31 They're only responsible for passing certain data down to their children. 1:33 For instance, the player component has no need for the score state, but it has to 1:37 receive it via props in order to pass it down the component tree to counter. 1:42 And header's only job is to pass data down to the stats component. 1:47 It doesn't render any UI based on the data passed to it. 1:51 This might be something we want to avoid, especially as our app grows in size and 1:55 complexity. 1:59 So this is where React's context API comes in to help circumvent prop drilling. 2:00 Context is mainly used when some data needs to be accessible by many components 2:04 at different nesting levels. 2:09 The context API has three essential parts, the create context method, 2:11 a provider, and a consumer. 2:16 First, you have to create the context. 2:18 So React.createContext sets up a context and returns an object with a provider and 2:20 a consumer, the two main components of the context API. 2:26 A single provider component is used as highest possible in the tree, and 2:29 it allows consumer component to subscribe to context changes. 2:33 Consumers access the provider to get any data they need. 2:37 That's how you avoid having to pass props several levels deep down 2:41 the component tree. 2:44 The provider and consumers are constantly communicating. 2:45 It's the communication between the two that makes context work. 2:49 Next, we'll get started by creating a new context and providing it to our app. 2:52
You need to sign up for Treehouse in order to download course files.Sign up