Ответ
Side effects (побочные эффекты) — это любые изменения состояния вне функции или взаимодействие с внешним миром. В React к ним относятся:
- Запросы к API (
fetch,axios) - Подписки (
setInterval,addEventListener) - Прямые манипуляции с DOM (
document.title) - Логирование (
console.log) - Глобальные изменения (
localStorage,Redux dispatch)
В React хуке useEffect такие операции выполняются после рендера:
useEffect(() => {
const timer = setInterval(() => {
console.log('Tick');
}, 1000);
return () => clearInterval(timer); // cleanup
}, []);Чистые функции не имеют side effects — их результат зависит только от входных данных.
Ответ 18+ 🔞
Вот, смотри, про эти ваши сайд-эффекты, блядь. Ну, то есть, побочки всякие, понимаешь? Это когда функция, такая, вроде бы должна просто посчитать что-то и отдать, а она, сука, лезет куда не просят, нахуй.
Типа, представь: ты вызвал функцию, чтобы она тебе число вернула, а она, пидарас шерстяной, пока считала, ещё и письмо твоей мамке отправила, в консоль накакала и таймер на пять лет завела. Вот это и есть side effect, ёпта. Всякая хуйня, которая происходит помимо основного результата.
В нашем, в реактовском царстве-государстве, к таким пакостям относят:
- Запросы куда-то — ну, это когда ты к серваку лезешь,
fetchилиaxiosтам свой суёшь. - Подписки всякие — типа
setInterval, чтобы каждую секунду пищать, или слушатели событий (addEventListener), которые, как шпионы, за всем следят. - Прямые манипуляции с DOM — ой, это вообще отдельная песня. Когда ты в лоб
document.titleменяешь, будто ты не в Реакте, а в каком-нибудь 2007 году. - Логирование — это твои любимые
console.log, которые по всему коду разбросаны, как говно по полю. - Глобальные изменения — запихнул что-то в
localStorage, диспатч в Redux отправил — всё, блядь, мир вокруг изменился.
И вся эта ебанина в хуке useEffect и происходит, потому что он как раз для такого грязного дела и создан. Выполняется эта пакость после того, как компонент нарисовался.
Вот смотри, пример, чтобы не быть мудаком:
useEffect(() => {
// Вот тут мы делаем сайд-эффект, блядь — интервал заводим.
const timer = setInterval(() => {
console.log('Tick'); // И каждый тик в консоль гадим.
}, 1000);
// А это, хитрая жопа, функция очистки. Чтобы когда компонент сдохнет, не оставить за собой говна.
return () => clearInterval(timer); // cleanup, ёпта!
}, []); // Пустой массив зависимостей — значит, запустится один раз, примонтируется и всё.А чистые функции — это святые, блядь. Они нихуя не трогают, ни с кем не взаимодействуют. Дали им данные на вход — они тебе результат на выход. И всё. Ни писем мамке, ни таймеров. Предсказуемые, как день зарплаты. Красота, ёперный театр!