Context

We understand what a Context is, a place that gives us a way to pass values ​​to child components without passing them to child props.

Normally when transferring data between components, we usually put them into component props, this will lead to some components will have very bulky props and many components have the same props and to solve this problem, We have a way of using Context

When to Use Context

The theory is so but we can not use Context to transfer all data. So we will use Context to transfer the data like.

Context is designed to share data between components, the type of data shared through the Context is usually the type of “Global” nature that is common to many components, such as user information, themes, languages.

We will start with an example with the theme.

With the above example, to use the theme, we will have to put the theme in the props of the component and you try to imagine if the entire app uses so, the theme={props.theme} will be repeated how many times.

As for Context we will use the following:

Before You Use Context

Context is usually used when some data needs to be accessed at many components and at many levels, but we need to be careful and don’t use Context because it will make reuse of components. harder.

If you just want to reduce the load of multiple props between components, then you should consider using component compositions rather than Context.

A simple example is as follows:

For the above example, you need to pass the user and avatarSize down to the last layer and only the last layer uses the two above props, but in the above example, those two props are passed through multiple Component classes and it is redundant, And when the Avata Component needs some more props, what happens? The props of the other components will balloon a lot while they don’t need to use them.

As mentioned above, we can manipulate the component composition by putting the Avatar component first and passing it over to the other Components, so that the other Components will not need to care about how the Avatar will change. just getting a Component Avatar is enough, but for the Avatar section, no matter how many props it needs, it won’t affect the other Components.

Inverted ways like this will make your code much cleaner and easier to maintenance by minimizing the transmission of props, but it’s not a good way in many cases. a little bit more complicated

You can see we can not limit a component to only 1 child component, but it can transmit multiple child components at once or multiple views here . This is an example of splitting a component into many components right in the parent component, if you want to communicate with the parent component (using methods, state, props of the parent component), then you can use the Render Props .

However, in reality, it is not as simple as the examples we have just seen, but it will be much more complicated, such as sharing data not only in the Father and Son Component, but must be shared at many other levels. many, between many peer components. And the Context can help the components can use the same data, if the data in the Context changes, the components will change.

Today we stop at what Context is and when to use it, the following article will talk about how to use dentists.