実践：AIのReactコードをレビューする

なぜ学ぶか： Phase 02の総仕上げです。ここまで学んだ知識を使って、AIが生成しがちな「動くけど問題のあるコード」をレビューします。下の例には問題が3つ隠れています。まず自分で探してみてください。

まずはこの例を見てみましょう

function TodoApp({ initialTodos }: Props) {
  const [todos, setTodos] = useState(initialTodos);
  const [count, setCount] = useState(0);                    // 【?】

  useEffect(() => { setCount(todos.length); }, [todos]);    // 【?】

  const addTodo = (text: string) => {
    todos.push({ id: String(Date.now()), text });           // 【?】
    setTodos(todos);
  };

  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo.text}</li>                     // 【?】
      ))}
    </ul>
  );
}

答えは下の解説で。①countは計算で出せる ②pushは直接変更 ③keyがindex、の3点です。