useReducerを使うメリットが分かりません。

教えていただきたいこと

useStateの代わりにuseReducerを使うメリットを知りたいです。
できれば、実際に動くデモを見せていただき、メリットを体感したいです。

前提

useReducerでリファクタリングするという主旨の下記の記事を読みました。

いずれの記事も、複数のinput要素の値を1つのステートで管理しているように見受けられます。
ですが、useStateで作成するオブジェクト型のステートでも問題ないかと思います（2つ目の記事はそのようにした後、useReducerに書き換える流れを紹介しています。）

上記記事のリファクタリングの恩恵として、コードの見通しが良くなった、という主旨でまとめているように見受けられます。
ですが「見通しがよくなった」というのは人それぞれの感じ方によるのではないかと思い、「確かにuseReducerに書き換えてよくなったな～」という感じがせず、現状いまいちuseReducerのメリットが掴めていません。

useReducerに替えることでレンダリングの回数が減るのかなと思い、useReducerとuseStateそれぞれを使った複数input更新のコードを試してみましたが、変わりませんでした。
下記はそのデモです。

どちらの場合も、初回マウント時に4回、ステート更新時に2回レンダリングされています。

該当のソースコード

useReducerを使う場合

javascript
1import { useReducer, useEffect } from "react";
2
3const todoReducer = (state, action) => {
4  switch (action.type) {
5    case "SET_TODO":
6      return { ...action.payload };
7    case "CHANGE_TITLE":
8      return { ...state, title: action.payload };
9    case "CHANGE_BODY":
10      return { ...state, body: action.payload };
11    default:
12      return;
13  }
14};
15
16const getTodo = () => {
17  return { title: "Hoge", body: "Fuga" };
18};
19
20const defaultTodo = {
21  title: "",
22  body: ""
23};
24
25export default function App() {
26  const [state, dispatch] = useReducer(todoReducer, defaultTodo);
27  const { title, body } = state;
28
29  useEffect(() => dispatch({ type: "SET_TODO", payload: getTodo() }), []);
30
31  const changeTitle = (e) =>
32    dispatch({ type: "CHANGE_TITLE", payload: e.target.value });
33  const changeBody = (e) =>
34    dispatch({ type: "CHANGE_BODY", payload: e.target.value });
35
36  const checkTodo = () => console.log(state);
37
38  console.count("use useReducer");
39
40  return (
41    <section>
42      <h1>toDo編集</h1>
43      <h2>toDoタイトル： {title}</h2>
44      <p>文字数： {title.length}</p>
45      <input value={title} onChange={changeTitle} />
46      <h2>toDo内容</h2>
47      <p>文字数： {body.length}</p>
48      <textarea value={body} onChange={changeBody} />
49      <br />
50      <button onClick={checkTodo}>更新</button>
51    </section>
52  );
53}

useStateを使う場合

javascript
1import { useState, useEffect } from "react";
2
3const getTodo = () => {
4  return { title: "Hoge", body: "Fuga" };
5};
6
7const defaultTodo = {
8  title: "",
9  body: ""
10};
11
12export default function App() {
13  const [todo, setTodo] = useState(defaultTodo);
14  const { title, body } = todo;
15
16  useEffect(() => setTodo(getTodo()), []);
17
18  const changeTodoData = (type, { target: { value } }) =>
19    setTodo({ ...todo, [type]: value });
20
21  const checkTodo = () => console.log(todo);
22
23  console.count("use useState");
24
25  return (
26    <section>
27      <h1>toDo編集</h1>
28      <h2>toDoタイトル： {title}</h2>
29      <p>文字数： {title.length}</p>
30      <input value={title} onChange={(e) => changeTodoData("title", e)} />
31      <h2>toDo内容</h2>
32      <p>文字数： {body.length}</p>
33      <textarea value={body} onChange={(e) => changeTodoData("body", e)} />
34      <br />
35      <button onClick={checkTodo}>更新</button>
36    </section>
37  );
38}