React Compiler: Die Lösung für eine langsame React Anwendung ?
React zählt seit geraumer Zeit zu den beliebtesten JavaScript Frontend Frameworks.
Der Einstieg ist sehr leicht und die große Community hat zu einem breiten Ökosystem beigetragen.
Doch eines hört man immer wieder. React soll langsam sein. Ein Grund dafür ist, dass Komponenten öfter neu geladen werden als sie müssten.
Manuelle Optimierungen mit memo, useCallback und useMemo gehören zum Alltag von Entwicklern.
Nun entwickelt Meta den React Compiler, der sich aktuell noch in der Release-Candidate Phase befindet. Der Compiler verspricht, diese Optimierungen automatisch anzuwenden. Doch wie funktioniert er und kann er wirklich jede App schneller machen?
Was ist der React Compiler ?
Der React Compiler ist ein experimentelles Tool, das zur Build-Time ausgeführt wird. Während Memoization zur Optimierung zuvor noch manuell eingesetzt werden musste, wird dies nun durch den React Compiler automatisch übernommen.
Ein Beispiel ohne React Compiler
Folgend ist ein Beispiel zu sehen, bei dem ein klassischer Counter-Button mit State eingesetzt wird und eine Child-Komponente, die sich in derselben Parent-Komponente befindet. Wenn der Counter ausgeführt wird, wird auch die Child-Komponente aktualisiert, obwohl sie selbst gar keine anderen Properties erhalten hat.
import React, { useState } from "react";
function Child({ name }) {
console.log("Child: ", name);
return <div>Hallo {name}</div>;
}
export default function App() {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(c => c + 1)}>
Count: {count}
</button>
<Child name="Jonas" />
</div>
);
}Memoization Beispiel
Um diese unnötigen Rerenders zu vermeiden, müsste man normalerweise memoization verwenden, wie in diesem Beispiel. Dadurch würde bei einem Counter-Update die Child-Komponente nicht mehr aktualisiert werden.
import React, { useState } from "react";
const Child = React.memo(function Child({ name }) {
console.log("Child: ", name);
return <div>Hallo {name}</div>;
});
export default function App() {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(c => c + 1)}>
Count: {count}
</button>
<Child name="Jonas" />
</div>
);
}Mit dem React Compiler ist das jedoch nicht mehr nötig! Er kennt die Regeln von React, analysiert deinen Code automatisch zur Build-Time und wendet die Memoization an. Der zu schreibende Code würde dann genauso aussehen wie im ersten Beispiel ohne Memoization.
Installation des React Compilers
Der React Compiler ist als Babel Plugin verfügbar und kann mit npm installiert werden.
Zurzeit wird React 17 bis 19 unterstützt.
npm install -D babel-plugin-react-compiler@rcDanach entweder in der babel.config.js einfügen …
module.exports = {
plugins: [
'babel-plugin-react-compiler', // must run first!
// ... other plugins
],
// ... other config
};oder in der vite.config.js:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
react({
babel: {
plugins: ['babel-plugin-react-compiler'],
},
}),
],
});Ist der React Compiler die Lösung für alles und jeden ?
Der React Compiler ist ein sehr hilfreiches Tool, um die Performance von React Apps zu verbessern. Bei einer bereits stark optimierten App würde der Compiler jedoch nicht viel bringen. Wenn schon Memoization vorhanden ist, überspringt er die Optimierung dieses Teils damit keine konflikte entstehen können.
Das Gleiche gilt auch für sehr komplexe Apps. Wenn wild Props oder States mutiert werden, kann der Compiler in manchen Situationen nicht mehr korrekt erkennen, was er optimieren kann und lässt diese Teile des Codes dann unberührt.
Bei der Verwendung ist außerdem noch Vorsicht geboten. Es ist noch kein fertiges Tool und immer noch experimentell.
Dennoch ist es empfehlenswert, den React-Compiler einmal auszuprobieren.
Wenn du dich für React oder andere Themen rund um die Webentwicklung interessierst, bist du bei Trion genau richtig! Wir bieten verschiedene Schulungen und Beratungen an.
Auch für individuellen Bedarf können wir Workshops und Schulungen anbieten.