React for JavaScript Programmers VI: Context API and summary
Context API is an attempt to solve the problem of passing the same parameter(s) down to a whole "tree" of components.
It's not a "state" as it's only kept by the "root" component, but it's too complex and too numerous to be passed via props. Anything more than one or two level deep should use context instead.
Hypothetically you can pass down the entire component, or perhaps, pass by Ref (which, incidentally, ONLY works with classes, NOT functions), or perhaps, use React Redux and let a third-party handle the stuff, and make all the components refer to the third-party.
But there's an easier and native way through context API, where the "root component" declares something available via context, and the child components, even several times removed, can access it via the same context.
To setup a context API, you would need to create a context, then setup a "provider" for the context, which is what other components will call to "consume" the context as a consumer.
The data from the context is ONLY available within the contexttag.consumer, and nowhere else. It's a limited scope variable only available to components who have "subscribed" to the context. So any time the context data changed, the components would be notified and if necessary, re-rendered.
One of the most often used examples for context API practical use is page styling, such as "dark mode". It is something EVERY display component must access to determine how to render itself, yet it would be nearly impossible to pass everything by props. The App or main component can keep a state, but to get the data to all the components, it is better to setup a theme context, and let the display components consume the same context.
But any data that needs to be accessed by multiple components of various levels should be context-ualized. Another possibility is login-state / userlevel and similar data.
It is beyond the scope of this blogpost to discuss the ins and outs of context API. Instead, I'll refer you to the source: React.js on context.
Props -- useful to pass down some parameters one or two levels deep "down" (to child)
State -- memory kept by components to make itself smarter, not really used to pass parameters back and forth per see, but can be used in conjunction with other methods.
Context -- wider spread version of Props, can be used by all child components, "provide" once, "consume" by many.
Hooks -- combination of many other methods, can be used to add state to functions, setting a state can be used to "pass" parameters to a child component, and many many other uses.
Next we will discuss more interesting React Hook uses, and how it can be combined with other tools.
It's not a "state" as it's only kept by the "root" component, but it's too complex and too numerous to be passed via props. Anything more than one or two level deep should use context instead.
Hypothetically you can pass down the entire component, or perhaps, pass by Ref (which, incidentally, ONLY works with classes, NOT functions), or perhaps, use React Redux and let a third-party handle the stuff, and make all the components refer to the third-party.
But there's an easier and native way through context API, where the "root component" declares something available via context, and the child components, even several times removed, can access it via the same context.
To setup a context API, you would need to create a context, then setup a "provider" for the context, which is what other components will call to "consume" the context as a consumer.
The data from the context is ONLY available within the contexttag.consumer, and nowhere else. It's a limited scope variable only available to components who have "subscribed" to the context. So any time the context data changed, the components would be notified and if necessary, re-rendered.
One of the most often used examples for context API practical use is page styling, such as "dark mode". It is something EVERY display component must access to determine how to render itself, yet it would be nearly impossible to pass everything by props. The App or main component can keep a state, but to get the data to all the components, it is better to setup a theme context, and let the display components consume the same context.
But any data that needs to be accessed by multiple components of various levels should be context-ualized. Another possibility is login-state / userlevel and similar data.
It is beyond the scope of this blogpost to discuss the ins and outs of context API. Instead, I'll refer you to the source: React.js on context.
Summary
We discussed several ways to pass data from app (which is the root component) to component: props, states, context, and hooks. To summarize:Props -- useful to pass down some parameters one or two levels deep "down" (to child)
State -- memory kept by components to make itself smarter, not really used to pass parameters back and forth per see, but can be used in conjunction with other methods.
Context -- wider spread version of Props, can be used by all child components, "provide" once, "consume" by many.
Hooks -- combination of many other methods, can be used to add state to functions, setting a state can be used to "pass" parameters to a child component, and many many other uses.
Next we will discuss more interesting React Hook uses, and how it can be combined with other tools.
Comments
Post a Comment