So if you need to save a user's form inputs, for example, use local state and not Context.Īlways wrap the Provider around the lowest possible common parent in the tree - not the app's highest-level component. However, prop drilling is faster if you are just passing info down a couple of layers.Īvoid using Context to save state that should be kept locally. Context is great for managing state which is needed by large portions of an application. Like all good things in code, there are some caveats to using Context:ĭon't use Context to avoid drilling props down just one or two layers. Our button now switches the image between night and day in one click! This requires moving our Provider to a separate file and putting it in its own component, in this case, called ThemeContextProvider. We are currently passing a hard-coded value down through the Provider, however, our goal is to switch between night and day with our button. Note: We also need to wrap the component in - this allows us to add functionality to the button later. This uses the "render prop" pattern where we provide a regular function as a child that returns some JSX to render. 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. So for good measure, we should convert our components into functional components and then use ThemeContext.Consumer component to pass info through the app. If you've learned about Hooks in React already, you'll know we can do just about anything with functional components these days. Unfortunately, this approach only works with class-based components. Note: I have moved ThemeContext into its own file to prevent a bug. Now, the classNames contain the string from the value prop. 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. 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. Import ThemeContext from "./themeContext" Ĭurrently, in App.js, we are simply returning the component. We also pass the value prop to our Provider. As we want the entire app to have access to this, we go to index.js and wrap the app in ThemeContext.Provider. If you want to see the full code, be sure to check out the Scrimba playground for this article. To demonstrate this, we will create this funky (and super useful) day-to-night switching image. Think of it as the components playing Catch with data - the intermediary components might not even "know" that anything is happening: 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. This tedious and time-consuming process is known as prop drilling. 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. While this solution does work, problems begin if a component on a different branch needs the data: 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: 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 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.Ĭonsider this tree, in which the bottom boxes represent separate components: In this quick 5-minute tutorial, you'll see an introduction to what Context is and how to use it! React's Context API has become the state management tool of choice for many, oftentimes replacing Redux altogether.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |