В этом примере реализовано небольшое React‑приложение, где при каждом рендере вызывается дорогая функция и несколько дочерних компонентов перерисовываются без необходимости. Задача — предложить оптимизации, позволяющие избежать лишних вычислений и ререндеров, используя такие инструменты, как React.memo, useCallback, useMemo и другие подходы к управлению зависимостями.

import React from "react";
import { useState } from "react";

export const App = () => {
  const [baseNumber] = useState(9);
  const [inputText, setInputText] = useState("");

  const computeHeavy = () => {
    console.log("computeHeavy");
    return baseNumber + Date.now();
  };

  const handleSend = () => {
    console.log("send text = ", inputText);
  };

  return (
    <div>
      <TextField text={inputText} setText={setInputText} />
      <HeavySendButton onClick={handleSend} />

      <pre>{computeHeavy()}</pre>

      <button onClick={handleSend}>Кнопка отправки 2</button>
    </div>
  );
};

const HeavySendButton = ({ onClick }) => {
  console.log("SendButton render");
  return <button onClick={onClick}>Кнопка отправки 1</button>;
};

const TextField = ({ text, setText }) => {
  return (
    <input value={text} onChange={(event) => setText(event.target.value)} />
  );
};

Повышение эффективности рендеринга React‑компонентов