#REACT USECONTEXT HOW TO#
#REACT USECONTEXT CODE#

How to use the useContext Hook in React to give us access to the closest Context object in our functional components.

How to create a new Context in React using React.createContext.The benefits of using React Context in long component trees.After reading this tutorial, you’ll have learned: createContext ( ) const MusicPlayerProvider = (props ) =>. Import React from 'react' const MusicPlayerContext = React. This will be a React component that acts as a wrapper where we set up the Context, but also return that Context’s Provider for us to wrap our two other components in. Creating the Music Player ContextĬreate a new file called MusicPlayerContext.js. Therefore, we’ll use the React Context API to store this information inside of its state, and then we’ll use the useContext Hook to make it this state available to both components. The list of songs and the player controls at the bottom both need to know which track is currently playing, and if the track is playing or if it’s paused. Take a look at the screenshot above of what we’re building. A set of player controls for playing/pausing, skipping to the next track, and skipping to the previous track.A list of songs with a play/pause button for each.You can do the same, or use an existing React project.īuilding a music player is a fantastic example to demonstrate how the useContext Hook works because it has two child components that share the same application state: I’ve als created a fresh React app using Create React App. I’m using the Bulma CSS library and FontAwesome in my examples below. Let’s learn how we can use the useContext Hook in React to help us build a simple Spotify clone ! The example below shows Context being used in a Class component:Ĭonst context = useContext (AppContext ) What We’re Building Let’s compare the difference between using Context inside of a Class component to using it inside of a functional component with the useContext Hook. The useContext Hook provides all the same functionality you’d expect from the Context API, just packaged up into a simple to use Hook that you can use inside functional components. I recommend skimming through the official React documentation on Context before continuing. The React Context API allows you to easily access data at different levels of the component tree, without having to pass data down through props. This is where Context comes to the rescue.

That’s painstaking, tiresome, and prone to errors. You’d have to pass that data through each and every component, through their props, until you reach the last child component. In React data is passed top-down from one component to another through props. Now, imagine passing data from the uppermost component all the way down to the last child component. Imagine for a moment that you have a React app with a single parent component that contains many levels of child components inside of it.

#REACT USECONTEXT CODE#

View Code What we’re building in this tutorial.īefore we jump into our code editor, let’s understand the React Context API a little more, and how the useContext Hook helps simplify sharing data with multiple React components.

React usecontext