In a previous post, I wrote about dependency inversion using render props. If you don't know about the render props pattern, I would recommend checking that one out first. To summarize, we can use render props to extract the state management responsibilities from a class that displays an alert. Now this AlertManager manages the state of the alert and exposes its state through render props. Now, let's say I want to display an alert only in one place in my application, like a flash message in the header. If I want to set the state of the alert from a component nested deep in the component tree, I may need to pass the showAlert prop through several other components first, which would be cumbersome and difficult to change. This is a use case where we typically reach for Redux, Flux, or some sort of global state management. But, as of React 16.3, there is another way! What is Context? Context is a new React feature that allows you to share state between components. For example, let's say I want to make alerts available in the global state.


I guess you came to this post by searching similar kind of issues in any of the search engine and hope that this resolved your problem. If you find this tips useful, just drop a line below and share the link to others and who knows they might find it useful too.

Stay tuned to my blog, twitter or facebook to read more articles, tutorials, news, tips & tricks on various technology fields. Also Subscribe to our Newsletter with your Email ID to keep you updated on latest posts. We will send newsletter to your registered email address. We will not share your email address to anybody as we respect privacy.

This article is related to


React,Front-end,JavaScript