By artalar What is context In addition to , which are accessible only to the immediate child component, React components can define a context, which is accessible to all of their nested children. That means that no matter how deeply nested a component is, it can access context created any number of nodes up the tree. Context API is the base for all of the popular libraries that require the ability to access global values from each level of the component tree: react-redux, react-mobx, react-router, styled-components (ThemeProvider). props Issues with the old context data could be received, but it was impossible to subscribe to its updates. To be exact, update — as it goes for props — occurred when the parent component re-rendered. But since the data is being transferred from the context source to the context consumer through the large (in fact, any) number of components, and those can stop the update by their own , this kind of subscription cannot be called reliable. So while designing libraries, where data should be updated for consuming components, developers had to create update mechanisms manually — which is not an easy job as a practical matter. Read more in or watch of MobX creator. In the old version shouldComponentUpdate the article the presentation New API React.createContext Some developers consider the new context ( ) to be a replacement of (or any other state container), but that is comparing apples to oranges. The main objective of the new context is to facilitate effective updates of consumers ( by Dan Abramov) so that the developers can focus on the main features of their libraries. The new context also boasts an improved, more intuitive interface. [React.createContext](https://reactjs.org/docs/context.html) redux more details Note that has minimal functionality for managing the states: subscription and update. Those can be substituted with using (and ) from the regular . It would be more accurate to say that the new context, in some applications, can be used instead of , meaning that the state and update can be used instead, and can be replaced by React.createContext. There isn’t an “out-of-the-box” replacement of with context, but there are . redux state setState React.Component redux React.Component react-redux redux middleware third party libraries render-prop As you can see, the new API uses the render-prop approach to share the state or behaviour with the other subscribed components. While the details of implementation and example code are outlined in the , I would like to highlight the benefits and drawbacks of this method: React.createContext official documentation ( ) Prevention of naming collisions in case of multiple subscriptions ( ). Because the classic HOCs combine , if we have multiple HOCs in a row, and any of the passed properties have identical names, the values will be overwritten, and the final object that reaches the component will have the value of the very last HOC. Using render-prop solves that problem, because props are not combined, and each passed parameter of the subscription is accessed individually within the passed function. + Consumer props props (–) “Сallback hell” and generation of new functions, or the alternative of redefining the render portions into separate methods (which interferes with the consistency of design pattern). More details are in the . official documentation If you don’t like the render-prop approach, and you would rather use the “good old” HOCs — here is a simple example of how it can be implemented with memoization: unstable_observedBits Information found in source code and tests of React, and in this article While it has not been publicly announced or added to official documentation (and most likely, ), in addition to previously mentioned functionality, has a second argument that accepts a function. The component also accepts a bitmask as prop. This functionality is similar to in . Let’s take a closer look. won’t be React.createContext Consumer unstable_observedBits shouldComponentUpdate React.Component Bit masks are an old technology, used in particular in Linux permissions settings. The concept of bit masking involves each bit, in specific order, setting or indicators for a specific setting. The advantage of bit masks is that to update the value, only a single bitwise operation needs to be performed on the original bit mask using a rule mask. To set the value of the target bit to , an “OR” — — bit operator is used with the target bit === , and other bits in the mask set to . To set the value to , an “AND” — — bit operator is used with the target bit === , and other bits in the mask set to . This may seem confusing in the beginning, but in practice it is a simple, intuitive, and fast method of storing and modifying / values. Bit masks true false true | 1 0 false & 0 1 true false Usage The bit mask in the description and examples below is used to track changes in the state. Each bit in the bit mask should correspond to a value in the state. The second argument of React.createContext accepts a function that takes the previous and new states, and returns the updated bitmask. In turn Consumer accepts a bitmask containing the bits of the “true” values responsible for the state values we want to observe, as unstable_observedBits. When Consumer receives the bitmask, it the new bitmask with unstable_observedBits, and performs a bitwise AND operation on them. The Consumer will only be re-rendered if the result of the operation is not 0. If the second argument of React.createContext and the unstable_observedBits Consumer argument are not provided, render-prop will be called any time the context changes. compares Example As indicated by the parameter name, this API is not stable and should not be used in production. create-subscription Another utility added to the React is . Previously, to manage subscriptions, respond to property changes and re-render components developers had to create a wrapper using , which would trigger or . To simplify subscriptions, developers can now use the more transparent API from the package in the official React repository. source code [create-subscription](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#adding-event-listeners-or-subscriptions) React.Component setState forceUpdate createSubscription create-subscription Summary React 16.3 brings many interesting changes and will, without a doubt, improve the quality of use of the React framework and simplify the development of React support libraries. Use of the new context can be viewed in this interactive demo: All of the features above can be viewed in this interactive demo:
