fix: исправлены ошибки линтеров

Author: AlaYafremava

lessons/lesson31/examples/examplePage/ExamplePage.jsx

@@ -1,64 +1,68 @@
-import React, { useState, memo, useMemo, useCallback } from "react"
+import React, { useState, memo, useMemo, useCallback } from "react";
 
 const heavyDouble = (num) => {
   let result = 0;
   // Двойной цикл для большей задержки
   for (let i = 0; i < 100000; i++) {
     for (let j = 0; j < 10000; j++) {
-      result = num * 2 + i + j;  // Какая-то "полезная" работа
+      result = num * 2 + i + j; // Какая-то "полезная" работа
     }
   }
   return result;
-}
+};
 
 export default function ExamplePage() {
-  const [count, setCount] = useState(0)
-  const [name, setName] = useState('Alla')
-  const [isAdmin, setIsAdmin] = useState(false)
-  const [dark, setDark] = useState(false)
+  const [count, setCount] = useState(0);
+  const [name, setName] = useState("Alla");
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [dark, setDark] = useState(false);
 
   const themeStyle = {
-    backgroundColor: dark ? 'tomato' : 'white'
-  }
+    backgroundColor: dark ? "tomato" : "white",
+  };
 
   const setDarkTheme = () => {
-    setDark(prev => !prev)
-  }
+    setDark((prev) => !prev);
+  };
 
-  const memoUser = useMemo(() => ({
-    name, isAdmin
-  }), [name, isAdmin])
+  const memoUser = useMemo(
+    () => ({
+      name,
+      isAdmin,
+    }),
+    [name, isAdmin]
+  );
 
   const incrementCount = () => {
-    setCount(count => count + 1)
-  }
+    setCount((count) => count + 1);
+  };
 
   const resetCount = useCallback(() => {
-    setCount(0)
-  }, [])
+    setCount(0);
+  }, []);
 
-  const doubleCount = useMemo(() => heavyDouble(count), [count])
+  const doubleCount = useMemo(() => heavyDouble(count), [count]);
 
   return (
-    <div style={{...themeStyle}}>
-      <Title user={memoUser} resetCount={resetCount}/>
-      <CountInfo count={doubleCount}/>
+    <div style={{ ...themeStyle }}>
+      <Title user={memoUser} resetCount={resetCount} />
+      <CountInfo count={doubleCount} />
       <button onClick={incrementCount}> + 1 </button>
       <button onClick={setDarkTheme}>Dark</button>
     </div>
-  )
+  );
 }
 
-const Title = React.memo(({user, resetCount}) => {
-    console.log('Title rendered')
-    const {name, isAdmin} = user
+const Title = React.memo(({ user, resetCount }) => {
+  console.log("Title rendered");
+  const { name, isAdmin } = user;
 
   return (
     <>
-      <h1>{isAdmin? name : 'Example'}</h1>
+      <h1>{isAdmin ? name : "Example"}</h1>
       <button onClick={resetCount}>RESET</button>
     </>
-  )
-})
+  );
+});
 
-const CountInfo = ({count}) => <h3>Count value {count}</h3>
+const CountInfo = ({ count }) => <h3>Count value {count}</h3>;

lessons/lesson31/examples/examplePage/index.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useState } from "react";
 
 // const heavyDouble = (num) => {
 //   let result = 0;
@@ -12,21 +12,21 @@ import { useState } from "react"
 // }
 
 export default function ExamplePage() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
-  const incrementCount = () => {}
+  const incrementCount = () => {};
 
   return (
     <>
       <Title />
       <CountInfo />
       <button> + 1 </button>
     </>
-  )
+  );
 }
 
 const Title = () => {
-  <h1>Example</h1>
-}
+  <h1>Example</h1>;
+};
 
-const CountInfo = ({count}) => <h3>Count value {count}</h3>
+const CountInfo = ({ count }) => <h3>Count value {count}</h3>;

lessons/lesson31/examples/useCallbackPage/CounterButton.jsx

@@ -1,8 +1,8 @@
-import { memo } from "react"
+import { memo } from "react";
 
 // Дочерний компонент, который мы хотим оптимизировать
 export const CounterButton = memo(({ onClick, label }) => {
-  console.log('Кнопка перерендерилась:', label);
+  console.log("Кнопка перерендерилась:", label);
 
   return <button onClick={onClick}>{label}</button>;
 });

lessons/lesson31/examples/useCallbackPage/index.jsx

@@ -1,22 +1,21 @@
-import { useCallback, useState } from "react"
+import { useCallback, useState } from "react";
 
-import { CounterButton } from "./CounterButton"
+import { CounterButton } from "./CounterButton";
 
 function UseCallbackPage1() {
-
-  const [counter, setCounter] = useState(0)
+  const [counter, setCounter] = useState(0);
 
   const incrementCounter = useCallback(() => {
-    setCounter(counter + 1)
-  }, [counter])
+    setCounter(counter + 1);
+  }, [counter]);
 
   return (
     <>
       <h1>useCallback</h1>
       <h3>{counter}</h3>
       <button onClick={incrementCounter}> + 1 </button>
     </>
-  )
+  );
 }
 
 function UseCallbackPage() {
@@ -25,38 +24,32 @@ function UseCallbackPage() {
 
   // Функция не меняется между рендерами
   const incrementCounter = useCallback(() => {
-    setCounter(prev => prev + 1); // Используем функциональное обновление
+    setCounter((prev) => prev + 1); // Используем функциональное обновление
   }, []); // Пустые зависимости - функция стабильна
 
   // Без useCallback - создается новая функция при каждом рендере
   const badIncrement = () => {
-    setCounter(prev => prev + 1);
+    setCounter((prev) => prev + 1);
   };
 
   return (
     <div>
       <h1>useCallback</h1>
       <h3>Счетчик: {counter}</h3>
-      
+
       {/* С useCallback - кнопка не перерендеривается лишний раз */}
-      <CounterButton 
-        onClick={incrementCounter} 
-        label="+1 (с useCallback)" 
-      />
-      
+      <CounterButton onClick={incrementCounter} label="+1 (с useCallback)" />
+
       {/* Без useCallback - кнопка перерендеривается всегда */}
-      <CounterButton 
-        onClick={badIncrement} 
-        label="+1 (без useCallback)" 
-      />
-      
-      <button onClick={() => setDummy(d => d + 1)}>
+      <CounterButton onClick={badIncrement} label="+1 (без useCallback)" />
+
+      <button onClick={() => setDummy((d) => d + 1)}>
         Принудительный перерендер ({dummy})
       </button>
-      
+
       <p>Откройте консоль и нажимайте "Принудительный перерендер"</p>
     </div>
   );
 }
 
-export default UseCallbackPage
+export default UseCallbackPage;

lessons/lesson31/examples/useEffectPage/index.jsx

@@ -1,38 +1,38 @@
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
 
 // 1. Не передать ничего
 function UseEffectPage1() {
-  const [, setValue] = useState({})
+  const [, setValue] = useState({});
 
   useEffect(() => {
-    // Эффект срабатывает при монтировании компонента и при каждом рендере. 
-    console.log('Срабатываю на каждый рендер')
-  })
+    // Эффект срабатывает при монтировании компонента и при каждом рендере.
+    console.log("Срабатываю на каждый рендер");
+  });
 
   return (
     <div>
       <h1>useEffect</h1>
       <button onClick={() => setValue({})}>Обновить состояние</button>
     </div>
-  )
+  );
 }
 
 // 2. Передать пустой массив - []
 function UseEffectPage2() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   useEffect(() => {
-    // Эффект срабатывает только при монтировании компонента. 
-    console.log('Сработаю 1 раз')
-  }, [])
+    // Эффект срабатывает только при монтировании компонента.
+    console.log("Сработаю 1 раз");
+  }, []);
 
   return (
     <div>
       <h1>useEffect</h1>
       <h3>{count}</h3>
       <button onClick={() => setCount((prev) => prev + 1)}> + 1</button>
     </div>
-  )
+  );
 }
 
 // 3. Передать массив с переменными для отслеживания - [value]
@@ -44,14 +44,13 @@ function UseEffectPage3({ userId = 2 }) {
   useEffect(() => {
     if (!userId) return;
 
-    console.log('Сработаю при монтировании и изменении userId')
+    console.log("Сработаю при монтировании и изменении userId");
 
     fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
-      .then(response => response.json)
-      .then(json => setUser(json))
-      .catch(error => console.error('Ошибка загрузки:', error))
-      .finally(() => setIsLoading(false))
-
+      .then((response) => response.json)
+      .then((json) => setUser(json))
+      .catch((error) => console.error("Ошибка загрузки:", error))
+      .finally(() => setIsLoading(false));
   }, [userId]); // Запускается заново, если изменился userId
 
   if (isLoading) return <div>Загрузка...</div>;
@@ -71,18 +70,18 @@ function UseEffectPage() {
   const [time, setTime] = useState(new Date().toLocaleTimeString());
 
   useEffect(() => {
-    console.log('✅ Таймер запущен');
-    
+    console.log("✅ Таймер запущен");
+
     // Запускаем интервал при монтировании
     const intervalId = setInterval(() => {
       const currentTime = new Date().toLocaleTimeString();
       setTime(currentTime);
-      console.log('🕒 Время обновлено:', currentTime);
+      console.log("🕒 Время обновлено:", currentTime);
     }, 1000);
 
     // Функция очистки
     return () => {
-      console.log('Таймер остановлен');
+      console.log("Таймер остановлен");
       clearInterval(intervalId);
     };
   }, []); // Пустой массив - эффект только при монтировании/размонтировании
@@ -94,5 +93,4 @@ function UseEffectPage() {
   );
 }
 
-
-export default UseEffectPage
+export default UseEffectPage;

lessons/lesson31/examples/useMemoPage/TodoList.jsx

@@ -1,28 +1,29 @@
-import { useMemo } from 'react';
+import { useMemo } from "react";
 
 export default function TodoList({ todos, filter }) {
   // БЕЗ useMemo: фильтрация происходит при каждом рендере
   // const visibleTodos = todos.filter(todo => {
-  //   console.log('🔴 ФИЛЬТРАЦИЯ (без useMemo)'); // Это будет логироваться часто
-  //   console.log('--------------------'); // Это будет логироваться часто
-  //   return filter === 'all' || 
-  //          (filter === 'completed' && todo.completed) ||
-  //          (filter === 'active' && !todo.completed);
+  //   console.log("🔴 ФИЛЬТРАЦИЯ (без useMemo)"); // Это будет логироваться часто
+  //   console.log("--------------------"); // Это будет логироваться часто
+  //   return filter === "all" ||
+  //          (filter === "completed" && todo.completed) ||
+  //          (filter === "active" && !todo.completed);
   // });
 
   // С useMemo: фильтрация происходит только при изменении todos или filter
   const visibleTodos = useMemo(() => {
-    console.log('🟢 ФИЛЬТРАЦИЯ (с useMemo)'); // Логируется только при изменении зависимостей
-    return todos.filter(todo => 
-      filter === 'all' || 
-      (filter === 'completed' && todo.completed) ||
-      (filter === 'active' && !todo.completed)
+    console.log("🟢 ФИЛЬТРАЦИЯ (с useMemo)"); // Логируется только при изменении зависимостей
+    return todos.filter(
+      (todo) =>
+        filter === "all" ||
+        (filter === "completed" && todo.completed) ||
+        (filter === "active" && !todo.completed)
     );
   }, [todos, filter]); // Зависимости: todos и filter
 
   return (
     <ul>
-      {visibleTodos.map(todo => (
+      {visibleTodos.map((todo) => (
         <li key={todo.id}>{todo.text}</li>
       ))}
     </ul>