gistfile1.txt

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

function MyInput(props) {
  return (
    <input
      value={props.value}
      onInput={(e) => {
        props.onInput(e.target.value);
      }}
    />
  );
}

function MyInputB(props) {
  return (
    <input
      value={props.value}
      onInput={(e) => {
        props.onInput(e.target.value);
      }}
    />
  );
}

export function App(props) {
  const [inputValue, setInputValue] = useState({
    a: 1,
    b: 2,
  });

  const renderInput = useMemo(() => {
    return (
      <MyInput
        value={inputValue.a}
        onInput={(value) =>
          setInputValue((prevInputValue) => ({
            ...prevInputValue,
            a: value,
          }))
        }
      />
    );
  }, [inputValue.a]);

  const renderInputB = useMemo(() => {
    return (
      <MyInputB
        value={inputValue.b}
        onInput={(value) =>
          setInputValue((prevInputValue) => ({
            ...prevInputValue,
            b: value,
          }))
        }
      />
    );
  }, [inputValue.b]);

  return (
    <div className="App">
      {renderInput}
      {renderInputB}
    </div>
  );
}