Mobio Technological Solutions Blog

Mobio Solutions

React v 16.3.0 Release : New Context API Features

Finally, React 16.3 is out! We’ve all been anxiously waiting for this new React update. Maybe you are wondering what’s all the hype about? No worries we got you. In this article we highlight the exciting new features that are part of this release. Note: we will not include all the new features, just the most interesting ones. In case you want to know all the changes in this release find that info here . We’ll keep it short and concise and give a few links that will be helpful to those who want to know more about the inner workings of the new features. Enjoy!

Official Context API.

For many years, React has offered an experimental API for context. Although it was a powerful tool, its use was discouraged because of inherent problems in the API, and because we always intended to replace the experimental API with a better one. Version 16.3 introduces a new context API that is more efficient and supports both static type checking and deep updates. Note :- The old context API will keep working for all React 16.x releases, so you will have time to migrate.

CreateRef API

Previously, React provided two ways of managing refs: the legacy string ref API and the callback API. Although the string ref API was the more convenient of the two, it had several downsides and so our official recommendation was to use the callback form instead. Version 16.3 adds a new option for managing refs that offers the convenience of a string ref without any of the downsides: Note: Callback refs will continue to be supported in addition to the new createRef API. You don’t need to replace callback refs in your components. They are slightly more flexible, so they will remain as an advanced feature. Learn more about the new createRef API here.

ForwardRef API

Higher-order components (or HOCs) are a common way to reuse code between components. Building on the theme context example from above, we might create an HOC that injects the current “theme” as a prop:

Leave a Reply

Your email address will not be published. Required fields are marked *