Что такое Side Effect?

Что такое Side Effect

Side Effect (побочный эффект) — это любое изменение состояния или взаимодействие программы с внешним миром, которое происходит за пределами функции и влияет на что-то вне её области видимости.

Определение

Fункция имеет побочный эффект, если она:

• Изменяет переменные вне своей области видимости
• Обращается к базе данных
• Выполняет HTTP запрос
• Работает с файловой системой
• Пишет в консоль
• Изменяет DOM
• Использует случайные значения
• Работает с временем

Примеры Side Effects

// Пример 1: Изменение глобального состояния
let globalCounter = 0;

function increment() {
  globalCounter++; // SIDE EFFECT - меняет глобальную переменную
  return globalCounter;
}

// Пример 2: Изменение объекта (мутация)
function addUser(users, newUser) {
  users.push(newUser); // SIDE EFFECT - меняет исходный массив
  return users;
}

// Пример 3: HTTP запрос
function fetchUserData(userId) {
  fetch(`/api/users/${userId}`); // SIDE EFFECT - сетевой запрос
}

// Пример 4: DOM манипуляция
function updatePageTitle(title) {
  document.title = title; // SIDE EFFECT - меняет DOM
}

// Пример 5: Работа с временем
function delayedLog(message) {
  setTimeout(() => {
    console.log(message); // SIDE EFFECT - вывод в консоль
  }, 1000);
}

Pure Functions vs Side Effects

Pure Function (чистая функция) — функция БЕЗ побочных эффектов:

• Всегда возвращает одно и то же значение при одних и тех же аргументах
• Не меняет ничего вне функции
• Легко тестировать и предсказывать

// ЧИСТАЯ функция
function add(a, b) {
  return a + b; // только вычисление и возврат
}

// НЕ чистая функция (есть side effect)
let total = 0;
function addWithSideEffect(a, b) {
  total += a + b; // меняет внешнее состояние
  return total;
}

Side Effects в React

В React побочные эффекты управляются с помощью useEffect хука:

import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  // useEffect для управления побочными эффектами
  useEffect(() => {
    // HTTP запрос - это side effect
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]); // зависимость - когда запускать
  
  return <div>{user?.name}</div>;
}

Управление Side Effects

Хорошие практики:

1. Изоляция — собирайте все side effects в отдельные места

// Плохо
function processUser(id) {
  const user = database.find(id); // side effect
  const processed = calculate(user); // pure
  console.log(processed); // side effect
  return processed;
}

// Хорошо
function processUser(id) {
  const user = database.find(id);
  return calculate(user);
}

const result = processUser(id);
console.log(result); // side effect отделён

1. Контроль в React — используйте useEffect

function Component() {
  useEffect(() => {
    // Все side effects здесь
    const unsubscribe = subscribe();
    return () => unsubscribe(); // очистка
  }, []);
  
  return <div>content</div>;
}

1. Функциональный подход — минимизируйте side effects

// Вместо мутации массива
function addItem(items, newItem) {
  items.push(newItem); // ПЛОХО
}

// Создайте новый массив
function addItem(items, newItem) {
  return [...items, newItem]; // ХОРОШО
}

Почему это важно

• Тестируемость — чистые функции легче тестировать
• Предсказуемость — зная входные данные, знаем результат
• Отладка — проще найти проблемы
• Масштабируемость — код легче менять и расширять
• Производительность — легче оптимизировать чистые функции

Итог: Side Effects — неизбежная часть программирования, но их нужно понимать, контролировать и изолировать для написания качественного кода.