We won't walk through all of the changes made in the above branch. GitHub Repo for Help Queue with Light/Dark Theme using Props and Composition However to make component composition more concrete, we've created a version of Help Queue that has a toggleable light and dark theme and that uses only props and composition to achieve this. This is by nature: composition really depends on the needs and structure of your application! At this point, we should be well familiar with how props work, but component composition is more nebulous. What we should do instead is use two big alternatives to context to handle transferring data between components: props and component composition. Why? The Help Queue is small - with only 10 components, and 4 of those that need the theme data - and we're not planning on expanding its functionality. It's important to understand that the Help Queue doesn't need context to have a light and dark theme that we can toggle in between. Also, before reaching for context, first try using props and composing your components to make passing props easier. So, before you use context, ask yourself if the data that you need to disseminate is really needed on a global or wide scale. How so? Because any consumer component needs to be located downstream of a provider component. Using context in components makes them harder to reuse. Context should be the last tool you reach for, before prop drilling, lifting state up, and composition.
Keep in mind that anytime the context provider's value changes, all components that consume that context value will re-render.Ĥ. You shouldn't make a component a consumer if it doesn't absolutely need to. Make sure that only the components that need the context data, have it. For example, when your consumer components are nested in your component tree and they are on different branches, it often will not be possible to locate your context provider that close to any consumer components.ģ. This is a general best practice that may not be possible in some cases. Locate your provider as close as possible to the consumer components. For example, if we wanted to disseminate the current user and the color theme in the Help Queue, those should be in two separate contexts.Ģ. You can and should have multiple context providers for different state that needs to be disseminated. To wrap-up to the whirlwind of information about context, let's review some of the best practices for using context, the alternatives to context, and a few further exploration opportunities.
0 kommentar(er)
