From fd7908c62cbb9f37348fbab69c11e73a7bd210b4 Mon Sep 17 00:00:00 2001
From: Ala <yefremova.alla@gmail.com>
Date: Wed, 25 Feb 2026 09:02:35 +0300
Subject: [PATCH 1/2] fix: lesson 31

---
 .../lesson31/examples/useEffectPage/index.jsx |  3 +-
 .../lesson31/examples/useMemoPage/index.jsx   |  6 +++
 lessons/lesson31/lesson.md                    | 37 ++++++++++++++-----
 3 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/lessons/lesson31/examples/useEffectPage/index.jsx b/lessons/lesson31/examples/useEffectPage/index.jsx
index 764aaff..828283e 100644
--- a/lessons/lesson31/examples/useEffectPage/index.jsx
+++ b/lessons/lesson31/examples/useEffectPage/index.jsx
@@ -45,11 +45,12 @@ function UseEffectPage3({ userId = 2 }) {
   // Эффект, зависящий от userId
   useEffect(() => {
     if (!userId) return;
+    setIsLoading(true)
 
     console.log("Сработаю при монтировании и изменении userId");
 
     fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
-      .then((response) => response.json)
+      .then((response) => response.json())
       .then((json) => setUser(json))
       .catch((error) => console.error("Ошибка загрузки:", error))
       .finally(() => setIsLoading(false));
diff --git a/lessons/lesson31/examples/useMemoPage/index.jsx b/lessons/lesson31/examples/useMemoPage/index.jsx
index c1b56ea..fb3845d 100644
--- a/lessons/lesson31/examples/useMemoPage/index.jsx
+++ b/lessons/lesson31/examples/useMemoPage/index.jsx
@@ -15,11 +15,17 @@ const todos = [
 
 function UseMemoPage() {
   const [filter, setFilter] = useState("all");
+  const [counter, setCounter] = useState(0);
+
 
   return (
     <div style={{ padding: "20px" }}>
       <h1>useMemo</h1>
 
+      <button onClick={() => setCounter(c => c + 1)}>
+        Счётчик: {counter} (не влияет на TodoList!)
+      </button>
+
       {/* Кнопки фильтров */}
       <div style={{ marginBottom: "20px" }}>
         <h3>Выберите фильтр:</h3>
diff --git a/lessons/lesson31/lesson.md b/lessons/lesson31/lesson.md
index ff7819f..152f89c 100644
--- a/lessons/lesson31/lesson.md
+++ b/lessons/lesson31/lesson.md
@@ -25,6 +25,24 @@ description: "Hooks в React: useState, useEffect, useCallback, useMemo"
 
 <!-- v -->
 
+Жизненный цикл компонента в React
+
+```
+1. МОНТИРОВАНИЕ - Mounting
+   ├── Конструктор / useState
+   ├── Рендер (первый)
+   └── useEffect с пустым массивом зависимостей
+
+2. ОБНОВЛЕНИЕ - Updating (может повторяться много раз)
+   ├── Рендер (из-за изменения пропсов/состояния)
+   └── useEffect (в зависимости от deps)
+
+3. РАЗМОНТИРОВАНИЕ - Unmounting
+   └── Функция очистки useEffect
+```
+
+<!-- v -->
+
 <img src="./images/react-lifecycle.jpg" title="react lifecicles" />
 
 <!-- v -->
@@ -66,12 +84,12 @@ const [state, setState] = useState(initialState);
 ```jsx
 // ❌ ПЛОХО - не работает
 function Counter() {
-  const [age, setAge] = useState(0);
+  const [count, setCount] = useState(0);
 
   const increment = () => {
-    setAge(age + 1); // setCount(0 + 1) → setCount(1)
-    setAge(age + 1); // setCount(0 + 1) → setCount(1)
-    // Результат: age увеличится только на 1, а не на 2!
+    setCount(count + 1); // setCount(0 + 1) → setCount(1)
+    setCount(count + 1); // setCount(0 + 1) → setCount(1)
+    // Результат: count увеличится только на 1, а не на 2!
   };
 
   return <button onClick={increment}>+2</button>;
@@ -79,12 +97,12 @@ function Counter() {
 
 // ✅ ХОРОШО - работает правильно
 function Counter() {
-  const [age, setAge] = useState(0);
+  const [count, setCount] = useState(0);
 
   const increment = () => {
-    setAge((prev) => prev + 1); // prev = 0 → 1
-    setAge((prev) => prev + 1); // prev = 1 → 2
-    // Результат: age = 2
+    setCount((prev) => prev + 1); // prev = 0 → 1
+    setCount((prev) => prev + 1); // prev = 1 → 2
+    // Результат: count = 2
   };
 
   return <button onClick={increment}>+2</button>;
@@ -290,9 +308,10 @@ export default function UseEffectPage({ userId = 2 }) {
 
   useEffect(() => {
     if (!userId) return;
+    setIsLoading(true);
 
     fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
-      .then((response) => response.json)
+      .then((response) => response.json())
       .then((json) => setUser(json))
       .catch((error) => console.error("Ошибка загрузки:", error))
       .finally(() => setIsLoading(false));

From a4f792de6e3e6d9458236025cce554ee5ae09cf6 Mon Sep 17 00:00:00 2001
From: Ala <yefremova.alla@gmail.com>
Date: Wed, 25 Feb 2026 09:08:40 +0300
Subject: [PATCH 2/2] fix: lesson 31

---
 lessons/lesson31/examples/useEffectPage/index.jsx | 2 +-
 lessons/lesson31/examples/useMemoPage/index.jsx   | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/lessons/lesson31/examples/useEffectPage/index.jsx b/lessons/lesson31/examples/useEffectPage/index.jsx
index 828283e..d331093 100644
--- a/lessons/lesson31/examples/useEffectPage/index.jsx
+++ b/lessons/lesson31/examples/useEffectPage/index.jsx
@@ -45,7 +45,7 @@ function UseEffectPage3({ userId = 2 }) {
   // Эффект, зависящий от userId
   useEffect(() => {
     if (!userId) return;
-    setIsLoading(true)
+    setIsLoading(true);
 
     console.log("Сработаю при монтировании и изменении userId");
 
diff --git a/lessons/lesson31/examples/useMemoPage/index.jsx b/lessons/lesson31/examples/useMemoPage/index.jsx
index fb3845d..f2eb485 100644
--- a/lessons/lesson31/examples/useMemoPage/index.jsx
+++ b/lessons/lesson31/examples/useMemoPage/index.jsx
@@ -17,12 +17,11 @@ function UseMemoPage() {
   const [filter, setFilter] = useState("all");
   const [counter, setCounter] = useState(0);
 
-
   return (
     <div style={{ padding: "20px" }}>
       <h1>useMemo</h1>
 
-      <button onClick={() => setCounter(c => c + 1)}>
+      <button onClick={() => setCounter((count) => count + 1)}>
         Счётчик: {counter} (не влияет на TodoList!)
       </button>