在字段中键入时，React Hooks Prevent Button会重新呈现

Question

编辑我的问题以使其更清楚

我不希望在输入字段时以及单击按钮时要重新渲染状态对象

这里有2个组成部分

const mainState = {
  title: '',
};

const ButtonComponent = ({ confirmTitleName }) => {
  return (
    <>
      <TestReRender label={'Button Container'}/>
      <button style={{backgroundColor: 'red', outline: 'none'}} onClick={() => confirmTitleName('confirmTitleName >>>')}>CLICK ME</button>
    </>
  )
};

const InputComponent = ({ state, setState }) => {
  return (
    <>
      <TestReRender label={'Input Container'}/>
      <input
        type="text"
        value={state}
        onChange={(e) => setState(e.target.value)}
      />
    </>
  )
};

然后我创建了一个由前两个组成的组件

const InputAndButtonComponent = memo(({ confirmTitleName }) => {
  const [state, setState] = useState('');


  const Btn = () => <ButtonComponent confirmTitleName={() => confirmTitleName(state)}/>;

  return (
    <>
      <InputComponent state={state} setState={setState} />
      <Btn />
    </>
  )
});

最后一个组件InputAndButtonComponent然后导入到主组件中

const Main = () => {
  const [confirmTitle, setConfirmTitle] = useState(mainState);

  const confirmTitleName = useCallback((value) => {
    setConfirmTitle((prevState) => (
      {
        ...prevState,
        title: value
      }
    ))
  }, []);

  return (
    <main className={styles.CreateWorkoutContainer}>
      <>
        <TestReRender label={'Main Container'}/>
        <div>
          <InputAndButtonComponent confirmTitleName={confirmTitleName} />
        </div>
      </>
    </main>
  )
};

现在的问题是，当我按照以下步骤编写组件InputAndButtonComponent时，当我在输入字段中键入内容时，它会重新呈现

const InputAndButtonComponent = memo(({ confirmTitleName }) => {
  const [state, setState] = useState('');

  return (
    <>
      <InputComponent state={state} setState={setState} />

      // This re-renders when typing
      <ButtonComponent confirmTitleName={() => confirmTitleName(state)}/>;
    </>
  )
});

但是当我在字段中键入时，原始版本不会重新呈现

const InputAndButtonComponent = memo(({ confirmTitleName }) => {
  const [state, setState] = useState('');


  // This makes the <Btn /> below not re-rendering. I don't understand why
  const Btn = () => <ButtonComponent confirmTitleName={() => confirmTitleName(state)}/>;

  return (
    <>
      <InputComponent state={state} setState={setState} />

      // This does not re-render
      <Btn />
    </>
  )
});