You.i Engine One Now Supports React Native’s Hooks API
In October 2018 at React Conf in Nevada, Sophie Alpert, Dan Abramov, and Ryan Florence introduced a new way to write React Native components. Hooks, as the new API is known, is purely additive. The existing class-based API isn’t going anywhere, and for some use cases, is still the preferred way to construct components, but for many new components, Hooks are a more succinct and organized approach.
With the release of You.i Engine 6.0, we’ve upgraded the version of React Native to 0.60 which brings along with it React 16.8, enabling You.i Engine projects to use Hooks as well.
Hooks allow function components to contain state, side-effects, refs, and context whereas before they were required to be pure functions of their props. The name “Hook” derives from this ability for a function to “hook” directly into React’s systems which Facebook argues is a more direct representation than the equivalent with classes.
Compared to the class approach to state management, Hooks are functions that can be reused between components. Users are encouraged to use the primitive Hook functions to build up custom hooks geared to their use cases. In contrast to Higher Order Components (HOCs) and render props, this doesn’t introduce any component tree overhead.
The Effect Hook in particular obviates the need for most lifecycle methods typical in a class while also co-locating the setup and cleanup logic. As it so happens, Hooks provide React with more opportunities for optimization, so in addition to being more ergonomic for humans, they’re more efficient for machines.
With Hooks, we can simplify the development experience with You.i Engine One. Hooks should allow our customers to provide a better end-user experience thanks to its reusable and organized structure. In the video above, I demonstrate some sample upgrades of components in our open-source demo application, Auryn, to use this new API.