React 16.6 erscheint mit Neuerungen für Function-Komponenten und Code-Splitting

Version 16.6 der JavaScript-Bibliothek React ist erschienen. Im Vordergrund stehen drei Features: Eine Variante von PureComponent und shouldComponentUpdate für Function-Komponenten, Code-Splitting mit Suspense und eine einfachere Möglichkeit, den Context von Class Components aufzunehmen.

Bislang konnten Class-Komponenten auf das Rendern verzichten, wenn ihre Eingabe-Props beim Verwenden von PureComponent oder shouldComponentUpdate identisch sind. Das ist jetzt auch mit Function-Komponenten möglich. Dazu müssen Entwickler die Komponente in React.memo einschließen:

const MyComponent = React.memo(function MyComponent(props) {
  /* only rerenders if props change */
});

Code-Splitting mit Suspense

Darüber hinaus ermöglicht die Suspense-Komponente jetzt Code-Splitting. Dazu müssen Anwender einen dynamischen Import in einem Aufruf in React.lazy() wrappen. Code-Splitting ist ein Feature, das Bundler wie webpack oder Browserify unterstützen. Damit lassen sich mehrere Bundles erstellen, die dann dynamisch während der Laufzeit geladen werden. Das soll verhindern, dass zu große Bundles die Startdauer der Apps einschränken. Bislang ist das neue Feature noch nicht für ein serverseitiges Rendern verfügbar. Darüber hinaus soll die Suspense-Komponente in Zukunft Entwicklern erlauben, Data Fetching mit Suspense-Unterstützung in ihren Bibliotheken einzusetzen.

Mehr Infos

React auf der enterJS

React ist immer ein beliebtes Thema auf der von heise Developer, iX und dpunkt.verlag veranstalteten JavaScript-Konferenz. Zurzeit läuft der Call for Proposals der Veranstaltung: Sprecher können sich bis zum 14. Januar mit ihrer Vortragsidee bewerben.

In React 16.3 hatten die Macher die Context API als Ersatz für die vorherige Legacy Context API vorgestellt. Allerdings haben sie Feedback von Nutzern erhalten, dass die neue Render Prop API Schwierigkeiten in Class-Komponenten bereiten kann. Deshalb hat das Team sich entschieden, eine neue API hinzuzufügen, die es ermöglicht, den Context-Wert aus einer Class-Komponente aufzunehmen.

Eine vollständige Liste der Neuerungen findet sich in der Ankündigung im React-Blog sowie im Changelog. Das Projekt findet sich auf GitHub. (bbo)