function TodoList() {
const [todos, setTodos] = useState(['Buy groceries', 'Clean house']);
// イミュータブルな方法で新しいTodoを追加
const addTodo = (newTodo) => {
setTodos(prevTodos => [...prevTodos, newTodo]);
};
// イミュータブルな方法でTodoを削除
const removeTodo = (index) => {
setTodos(prevTodos => prevTodos.filter((_, i) => i !== index));
};
return (
// ... レンダリングロジック
);
}
この例では、addTodoとremoveTodoの両方がイミュータブルな方法で状態を更新しています。これにより、Reactは効率的に変更を検出し、必要な部分のみを再レンダリングできます。