Что такое side effect?

Что такое side effect?

Side effect (побочный эффект) — это любое действие функции, которое изменяет состояние вне её области видимости или взаимодействует с внешним миром. В функциональном программировании функции должны быть чистыми: они принимают аргументы и возвращают результат, не изменяя ничего снаружи. Побочные эффекты нарушают эту чистоту, поэтому их нужно контролировать.

Примеры побочных эффектов

• Запросы к серверу (fetch, axios)
• Изменение DOM напрямую
• Работа с localStorage или cookies
• Установка таймеров (setTimeout, setInterval)
• Логирование в консоль

Побочные эффекты в React

В React компоненты должны быть чистыми функциями от пропсов и состояния. Побочные эффекты выносятся в хук useEffect, который выполняется после рендеринга. Это гарантирует, что рендеринг остаётся предсказуемым.

import { useEffect, useState } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // Побочный эффект: запрос к API
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]); // Зависимость: эффект перезапускается при изменении userId

  return <div>{user ? user.name : 'Loading...'}</div>;
}

Вывод

Побочные эффекты неизбежны в реальных приложениях, но их нужно изолировать от чистой логики. В React используйте useEffect для работы с внешними ресурсами, чтобы сохранить предсказуемость компонентов и упростить тестирование.