Cross-Plattform-Entwicklung: React Native 0.59 bringt Hooks und Schlankheitskur

Facebook hat React Native 0.59 herausgegeben. Das Release konzentriert sich vor allem auf die Performanceverbesserung durch einen schlankeren Kern und Inline Requires, durch die Apps weniger Ressourcen beim Start laden. Außerdem halten die Hooks, die bereits Teil des jüngsten React-Releases waren, Einzug in die mobile Variante des Frameworks.

Am Haken statt verschachtelt

Hooks bieten einen Weg, React-Features zu nutzen, ohne dafür separate Klassen zu erstellen. Sie sind seit dem Anfang Februar veröffentlichten React 16.8 Bestandteil des JavaScript-Frameworks und halten nun Einzug in das darauf aufsetzende Framework zur Cross-Plattform-Entwicklung React Native. Da Hooks auch langfristig Klassen nicht ersetzen sollen, sondern explizit als Ergänzung gedacht sind, sind sie rückwärtskompatibel. Entwickler brauchen existierenden Code nicht ändern, aber Hooks sollen ihnen den Zugang zu React-Funktionen vereinfachen.

Insbesondere erlauben sie das Verwenden zustandsbehafteter Logik (Stateful Logic) unabhängig von der jeweiligen Komponente. Statt die gleiche Funktionsweise mehrfach zu schreiben oder in Klassen zu verpacken, bieten Hooks wiederverwendbare Funktionen unabhängig von der Komponentenhierarchie, wie einige Beispiele aus der React-Dokumentation zeigen. Unter anderem gibt der useState-Hook Entwicklern Zugriff auf einen Wert und eine zugehörige Funktion, um ihn zu ändern, wie folgender Sourcecode anhand eines Zählers für das Klicken eines Buttons zeigt:

import React, { useState } from 'react';

function Example() {
  // Deklariert eine neue state-Variable mit dem Namen count
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Hooks sind reguläre JavaScript-Funktionen, Entwickler müssen jedoch zwei Regeln beachten: Sie dürfen Hooks nur aus React-Funktionskomponenten und nicht aus regulären JavaScript-Funktionen verwenden. Außerdem ist der Einsatz auf die obere Ebene beschränkt – Hooks dürfen nicht innerhalb von Schleifen, bedingten Befehlen oder verschachtelten Funktionen vorkommen. Das über npm verfügbare Linter-Plug-in eslint-plugin-react-hooks hilft beim Einhalten der beiden Regeln. Das FAQ zu Hooks in React 16.8 gilt gleichermaßen für den Einsatz in React Native.

Schlankheitskur für das Framework

Das Abspecken des Kerns von React Native gehört zu den guten Vorsätzen für 2019, die das Team im November 2018 veröffentlicht hatte. Das aktuelle Release erklärt dafür die Komponenten AsyncStorage, ImageStore, MaskedViewIOS, NetInfo, Slider und ViewPagerAndroid als überholt (deprecated), was nicht deren Ende bedeutet, sondern sie lediglich aus dem React Native Core in separate Community-Projekte auslagert.

Einen schnelleren Start der mit dem Framework erstellten Apps sollen die Inline Requires bringen. Das Bundler-Tool Metro überprüft dafür, welche Komponenten Lazy Loading erlauben, deren Laden also erst bei Bedarf und nicht beim Start der App erfolgt. Standardmäßig ist die Funktion noch deaktiviert. Wer sie verwenden möchte, muss in der Konfiguration "metro.config.js" den Wert für inlineRequires auf true setzen.

Weitere Neuerungen wie der optimierte JavaScriptCore (JSC) für Android lassen sich dem React-Native-Blog entnehmen. Die vollständige Liste der Neuerungen findet sich im Changelog auf GitHub. (rme)