在使用useReducer时如何在React js中进行优化，循环传递给子组件的状态

function App() {
  return (
    <div className="App">
      <UseReducerToDo/>
    </div>
  );
}

const { useMemo, useReducer, useState } = React;

const reducer = (state, action) => {
  return [...state, { id: Date.now(), ToDo: action, completed: false }];
};

function UseReducerToDo() {
  const [state, dispatch] = useReducer(reducer, []);
  const [Todo, setTodo] = useState("");

  const addToTODO = (e) => {
    e.preventDefault();
    dispatch(Todo);
  };
  
  const todos = useMemo(() => (
    state.map((todo) => <DispToDo key={todo.id} todo={todo} />)
  ), [state]);

  return (
    <div>
      <form onSubmit={addToTODO}>
        <input
          type="text"
          value={Todo}
          onChange={(e) => setTodo(e.target.value)}
        ></input>
      </form>
      {state.length > 0 ? todos : "no pending items"}
    </div>
  );
}

function DispToDo({ todo }) {
  console.log("DispToDo", todo);
  return (
    <div>
      <p>
        {todo.ToDo + "->"} status {todo.completed ? "done" : "pending"}
      </p>
    </div>
  );
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>