diff --git a/lessons/lesson31/examples/useEffectPage/index.jsx b/lessons/lesson31/examples/useEffectPage/index.jsx index 764aaff..d331093 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..f2eb485 100644 --- a/lessons/lesson31/examples/useMemoPage/index.jsx +++ b/lessons/lesson31/examples/useMemoPage/index.jsx @@ -15,11 +15,16 @@ const todos = [ function UseMemoPage() { const [filter, setFilter] = useState("all"); + const [counter, setCounter] = useState(0); return (

useMemo

+ + {/* Кнопки фильтров */}

Выберите фильтр:

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" +Жизненный цикл компонента в React + +``` +1. МОНТИРОВАНИЕ - Mounting + ├── Конструктор / useState + ├── Рендер (первый) + └── useEffect с пустым массивом зависимостей + +2. ОБНОВЛЕНИЕ - Updating (может повторяться много раз) + ├── Рендер (из-за изменения пропсов/состояния) + └── useEffect (в зависимости от deps) + +3. РАЗМОНТИРОВАНИЕ - Unmounting + └── Функция очистки useEffect +``` + + + @@ -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 ; @@ -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 ; @@ -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));