Сделали useReducer для счетчика

src/App.jsx

@@ -1,51 +1,41 @@
-import { useState } from 'react'
+import { useState, useReducer } from 'react'
+
+function counterReducer(state, action) {
+    switch (action.type) {
+        case 'increment':
+            return state + 1
+        case 'decrement':
+            return state - 1
+        case 'reset':
+            return 0
+        case 'set_value':
+            return action.value
+        default:
+            return state
+    }
+}
+
+function Counter() {
+    const [count, dispatch] = useReducer(counterReducer,0);
+    
+    return (
+        <div>
+            <span>Счетчик: {count}</span>
+            <button onClick={()=> dispatch({type: 'increment'})}>+</button>
+            <button onClick={()=> dispatch({type: 'decrement'})}>-</button>
+            <button onClick={()=> dispatch({type: 'reset'})}>reset</button>
+            <button onClick={()=> dispatch({type: 'set_value', value: 5})}>set 5</button>
+        </div>
+    )
+}
 
 function App() {
-    const [tasks,setTasks] = useState([]);
+    const [tasks, setTasks] = useState([])
+    const [filter, setFilter] = useState('all')
+    const [sortBy,setSortBy] = useState('date')
     
-    //Неправильный вариант решения
-    const toggleTask = taskId => {
-        const task = tasks.find(t => t.id === taskId);
-        task.complite = !task.complite; // Мутация
-        setTasks(tasks)
-    }
-    //Правильный вариант решения
-    const toggleTask = taskId => {
-        setTasks(tasks.map(task => 
-            task.id === taskId ? {...task, complite: !task.complite} : task
-        ))
-    }
-    
-    const [user, setUser] = useState({
-        name:'Иван',
-        email:'ivan@example.com',
-        age: 22,
-        address: {
-            city: 'Syktyvkar',
-            street: 'Babushkina',
-            house: 19,
-        }
-    })
-    const updateName = newName => {
-        setUser({
-            ...user,
-            name: newName,
-        });
-    }
-    const updateProfile = updates => {
-        setUser({
-            ...user,
-            ...updates,
-        });
-    }
-    const updateCity = newCity => {
-        setUser(
-            ...user,
-            address: {
-                ...user.address,
-                city: newCity
-            }
-        );
+    const addTask = newTask => {
+        setTasks([...tasks,newTask])
     }
     
     
@@ -54,6 +44,7 @@ function App() {
 		<>
 			{/* Добавьте тестовый контент для проверки */}
 			<h1>Hello, React!</h1>
+            <Counter />
 		</>
 	)
 }