Preact X alpha is out now with Fragments, Hooks, and more!

Yesterday, the team behind Preact, a fast and smaller alternative of React, announced that Preact X is now in alpha. Preact X is the next major release, which includes some of the in-demand features of React like Fragments, Hooks, componentDidCatch, and createContext.

https://twitter.com/preactjs/status/1102726702860517376

Following are some of the updates Preact X alpha comes with:

Support for fragments

Preact X alpha supports fragments, which is the major feature in this release. Fragments allow you to group a list of children without adding extra nodes to the DOM. Developers can now return an array of children from a component’s render method, without having to wrap them in a DOM element.

The componentDidCatch lifecycle method

This release comes with the componentDidCatch lifecycle method for better error handling. To make a class component an error boundary, developers just need to define the componentDidCatch(error, info) method.

This method was introduced in React 16 to prevent a single JavaScript error in the UI from breaking the whole app. This method works using a concept called error boundary. An error boundary is a component that is responsible for catching JavaScript errors in their child component tree. It also logs the error and displays a fallback UI instead of the component tree that crashed.

Hooks

Preact X alpha supports hooks, which are functions that allow you to “hook into” or use React state and other lifecycle features via function components. You can import hooks in Preact using preact/hooks.

The createContext API

The createContext API, as the name suggests, creates a Context object. If a component is rendered that subscribes to this Context object, it will read the current context value from the closest matching provider above it in the tree. The Preact team calls it a successor for getChildContext, which is fine when you are certain that the value will not change. The creatContext API is a true pub/sub solution that allows you to deliver updates deep down the tree.

Devtools Adapter

In order to support the recent updates in react-devtools extension, the team has rewritten Preact’s devtools adapter from scratch, which can now directly hook into the renderer.  This also makes feature development much straightforward for the team.

Along with these excellent updates, this version also comes with a few breaking changes. The most noticeable one is that pros.children is not guaranteed to be an array anymore. This update is made to support rendering components that return an array of children without wrapping them in a root node.

Check out Preact’s GitHub repo to read the entire list of updates in Preact X alpha.

React Native 0.59 RC0 is now out with React Hooks, and more

Getting started with React Hooks by building a counter with useState and useEffect

React 16.8 releases with the stable implementation of Hooks