Ein Einblick in React Hooks

Ein neues Feature, das mit der React Version 16.8. Einzug erhielt, sind Hooks. Durch Hooks ist es möglich in funktionsbasierten Komponenten State Änderungen, Seiteneffekte oder andere Features zu nutzen. Sie bringen dadurch keine Breaking Changes mit, sondern sie sind eine weitere Variante zur Entwicklung von Komponenten.

Welche Hooks gibt es?

React liefert insgesamt 10 eigene Hooks. Diese werden laut der offiziellen Dokumentation in 3 Basic und 7 Additional Hooks unterteilt. In den meisten Fällen werden die 3 Basic Hooks useState(), useEffect() und useContext() am meisten verwendet.
Additional Hooks sind insbesondere zur Abdeckung von Corner Cases und/oder zur Optimierung der Anwendung angedacht. Neben den 10 eigenen Hooks von React ist es außerdem möglich, eigene Custom Hooks zu schreiben.

Welche Vorteile bringen Hooks?

Durch Hooks ist es möglich, State-behaftete Logik aus einer Komponenten zu extrahieren, sodass diese unabhängig getestet und wiederverwendet werden können. Einfach gesagt: Hooks erlauben es, das Rendern von UI-Komponenten von der Business-Logik zu trennen. Auch ein Vorteil von Hooks ist die Vermeidung von Higher order components. Bei High order components handelt es sich meistens um Wrapper Klassen, die dafür genutzt werden, um einen State zwischen Komponenten zu teilen. Dies führt oft zur sogenannten „Wrapper Hell“ was den Code unnötig verschachtelt und komplex macht. Durch Hooks werden States wiederverwendbar – ohne die hierarchische Struktur der Komponenten verändern zu müssen. Ein weiterer Vorteil ist der Cleanere Code. Beispielweise wird das this-property obsolet. Funktionalitäten des Codes, die eigentlich zusammengehören, werden an unterschiedlichen Stellen behandelt, z.B. bei Lifecycle-Methoden. Dies wird durch Hooks ebenfalls verbessert. Siehe hierzu die Codebeispiele untern. Es ist generell einfach möglich Code sauberer zu strukturieren und Nebenläufigkeiten (wie async-requests) abzubilden.

Welche Regeln gibt es beim Verwenden von Hooks?

Hooks dürfen nur auf Top-Level Ebene der React Komponente verwendet werden. Da es möglich ist, die selbe Hook-Methode mehrfach zu verwenden, muss sichergestellt werden, dass bei jedem Rendering der Komponente immer die gleiche Reihenfolge der Methoden ausgeführt wird. Das ist wichtig, damit der State korrekt erhalten bleibt. Eine weitere Regel besagt, dass Hooks nur innerhalb von React-Funktionen und in Custom Hooks aufgerufen werden dürfen. Jedoch nicht in normalen JavaScript Funktionen. Um dies zu gewährleisten gibt es ein extra Linter-Plugin, das verwendet werden sollte. Ein genaueren Einblick (und auch zur config des Plugins) gibt es in der offiziellen Doku.

Wann sollten Hooks verwendet werden?

Es wird nicht empfohlen, bestehende React Klassen zwingend durch Hooks zu ersetzen. Hooks sollen als Ergänzung dienen, nicht als Ablöse (zumindest auf absehbare Zeit). Für Performance Optimierungen kann es jedoch sinnvoll sein, bestimmte Teile des Codes in Hooks auszulagern. Beim Entwickeln neuer Komponenten oder eines neuen Projekts sollten jedoch definitiv Hooks verwendet werden. Im Gegensatz zu Klassen gibt es insgesamt weniger Code, der auch deutlich flexibler und wartbarer ist. Auch für Neueinsteigende ist die Hürde dadurch deutlich geringer.

Hooks Beispiele

Zum besseren Verständnis werden die 3 Basic Hooks (useState(), useEffect() und useContext()) in einem Minimalbeispiel dargestellt. Zum Vergleich wird die gleiche Funktion als Klasse und als Hook gegenübergestellt.

useState()

useState() wird am häufigsten verwendet. Damit wird eine Veränderung des bestehenden State vorgenommen. Wenn sich die Werte in einem State verändert, ist dies ein Signal, um das UI neu zu rendern.

class Counter extends React.Component {
 
  constructor(props){
   super(props);
   this.state = {
     count: 0
   };
  }
 
  render() {
    return (
      <div>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          {this.state.count}
        </button>
      </div>
    );
  }
}

function Counter() {
 
  const [ count, setCount ] = useState(0); // 0 ist der initiale State
  
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        {count}
      </button>
    </div>
  );
}

useEffect(callback, dependencyArray);

const defaultText = 'Einblick in React Hooks';
 
class Counter extends React.Component {
  state = {
    count: 0,
  };
 
  componentDidMount() {
    document.title = `Button Click Nr.: ${this.state.count}`;
  }
 
  componentWillUnmount() {
    document.title = defaultText;
  }
 
  render() {
    return (
      <div>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          {this.state.count}
        </button>
      </div>
    );
  }
}

const defaultText = 'Einblick in React Hooks';
 
function Counter() {
  const [ count, setCount ] = useState(0);
   
  useEffect(() => {
    document.title = `Button Click Nr.: ${count}`; // 1
    return () => {
      document.title = defaulttext; // 2
    }
  }, [count]); // 3
   
  return (
    <div>
      <button onClick={() => setCount(count+ 1)}>
        {count}
      </button>
    </div>
  );
}

function UserConsumer({user}) {
  return (
    <UserContext.Consumer>
      {context => {
        return user(context)
      }}
    </UserContext.Consumer>
  )
}

class UserThing extends React.Component {
  render() {
    return (
      <UserConsumer>
        {({state, dispatch}) => (
          <div>
            <div>{state.user.name}</div>
          </div>
        )}
      </CountConsumer>
    )
  }
}

const UserContext = React.createContext();
  
function App () {
  var user = {
    name: 'Bob',
    age: '30'
  }
  return (
    <UserContext.Provider value={user}>
      <div>
        <NameDisplay />
      </div>
    </UserContext.Provider>
  );
}
  
function NameDisplay() {
  const user = useContext(UserContext);
  return (
    <div>My name is: {user.name}</div>
  );
}

Eine Übersicht über alle weiteren Hooks bietet die offizielle Doku von React.

Mehr über Frontend Entwicklung erfahren