Избежать лишнего рендеринга в компоненте

У тебя есть компонент написанный на 17-ом реакте. Есть инпут, есть кнопка, есть текст. Текст вводим в инпут, он выводит данные в поле «Текст», а при клике на кнопку текст дублируется в консоль.

С этим компонентом почти все в порядке, но есть один момент. Но есть неприятный сайд эффект, что компонент кнопки каждый раз рендерится, когда мы что-то вбиваем в инпуте и этот момент нужно исправить, при этом не нарушив функциональность.

import * as React from "https://cdn.skypack.dev/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

const App = () => {
    const [text, setText] = React.useState("");

    const sendMessage = () => {
        console.log("SEND MESSAGE!", text);
    };

    return (
        <div>
            <div>Текст: {text}</div>
            <input
                type="text"
                name="message"
                value={text}
                onChange={(e) => setText(e.target.value)}
            />
            <Button handlerClick={sendMessage} />
        </div>
    );
};

const Button = ({ handlerClick }) => {
  return (
      <div>
          <div>Текст: {text}</div>
          <input
              type="text"
              name="message"
              value={text}
              onChange={(e) => setText(e.target.value)}
          />
          <Button handlerClick={sendMessage} />
      </div>
  );

const Button = ({ handlerClick }) => {
    console.log("Render Button");
    return <button onClick={handlerClick}>Click me!</button>;
};

ReactDOM.render(<App />, document.getElementById("root"));

Оставьте комментарий Отменить ответ