Ziel

Das Ziel eines React Entwicklers scheint zu sein, unnötige Renderzyklen von Komponenten zu verhindern. Dadurch wird das DOM nicht aktualisiert und die Anwendung wird nicht “langsamer”.

Analysetools

Mit dem React Profiler kann geprüpft werden, welche Komponenten gerendert werden. Ansonsten gibt es MillionJS, mit der ebenfalls React Anwendungen verbessert werden kann.

Optimierungsansätze

Ansatz 1

• mit dem memo() Hook wird die jeweillige Komponente nur gerendert, wenn sich die Werte der props von den Ursprünglichen unterscheiden
• Die Children Komponenten werden ebenfalls nicht gerendert, daher aufpassen beim Einsatz

Ansatz 2

• Ein Zustand (useState) solle immer einer Komponente zugeordnet werden (Außnahme sind Counter)

function App() {
  const [chosenCount, setChosenCount] = useState(0);
  function handleSetCount(newCount) {
    setChosenCount(newCount);
  }
  return (
    <>
      <Header />
      <main>
        <ConfigureCounter onSet={handleSetCount} />
        <Counter initialCount={chosenCount} />
        <Counter initialCount={0} />
      </main>
    </>
  );
}

export default App;

Erklärung State scheduling & Batching

• Achtung bei der Verwendung eines State in einer Funktion

function App() {
  log('<App /> rendered');
  const [chosenCount, setChosenCount] = useState(0);
  function handleSetCount(newCount) {
    setChosenCount(newCount);
    console.log(chosenCount);// old state
  }
  return (
    <>
      <Header />
      <main>
        <ConfigureCounter onSet={handleSetCount} />
        <Counter key={chosenCount} initialCount={chosenCount} />
        <Counter initialCount={0} />
      </main>
    </>
  );
}