InfernoJS v6.0.0, a React-like library for building high-performance user interfaces, is now out

Yesterday, InfernoJS community announced the release of InfernoJS v6.0.0. This version comes with Fragments using which you can group a list of children without adding extra nodes to the DOM. Three new methods have been added: createRef, forwardRef, and rerender, along with few breaking changes.

Added support for Fragments

Support for Fragments, a new type of VNode, is added. It will enable you to group a list of children without adding extra nodes to the DOM. With Fragments, you can return an array from Component render creating an invisible layer which ties its content together but will not render any container to actual DOM.

Fragments can be created using the following four ways:

Native Inferno API: createFragment(children: any, childFlags: ChildFlags, key?: string | number | null)

JSX: <> ... </>, <Fragment> .... </Fragment> or <Inferno.Fragment> ... </Inferno.Fragment>

createElement API: createElement(Inferno.Fragment, {key: 'test'}, ...children)

Hyperscript API: h(Inferno.Fragment, {key: 'test'}, children)

createRef API

Refs provide a way to access DOM nodes or React elements created in the render method.

You can now create refs using createRef() and attach them to React elements via the ref attribute. This new method allows you to write nicer syntax and reduces code when no callback to DOM creation is needed.

forwardRef API

forwardRef API allows you to “forward” ref inside a functional Component. This new method will be useful if you want to create a reference to a specific element inside simple functional Components. Forwarding ref means, automatically passing a ref through a component to one of its children.

rerender

With the help of the rerender method, all the pending setState calls will be flushed and rendered immediately. You can use it in the cases when the render timing is important or to simplify tests.

New lifecycle

Old lifecycle methods, componentWillMount, componentWillReceiveProps, or componentWillUpdate, will not be called when the new lifecycle methods, getDerivedStateFromProps or getSnapshotBeforeUpdate are used.

What are the breaking changes?

Since not all applications need server-side rendering, hydrate is now a part of the inferno-hydrate package.

Style properties now use hyphen. For example, backgroundColor => background-color.

In order to support JSX Fragment syntax, babel-plugin-inferno now depends on babel v7.

setState lifecycle is changed to have better compatibility with ReactJS. Also, componentDidUpdate will now be triggered later in the lifecycle chain, after refs have been created.