Dmytro Morar
Essentials

Side Effects

Side effects are any function operations that change external state or depend on it, going beyond pure computation. They make function behavior unpredictable and complicate testing and optimization.

Changing External State

  • Mutation of global variables, objects, or arrays.
  • Writing to local storage, cache, cookies.
  • DOM updates or working with interface elements.
  • Logging (console.log).
  • API calls, HTTP requests.
  • Random number generation.
  • Using time (Date.now()).

Unpredictability

  • The function result already depends not only on arguments.
  • Side effects complicate referential transparency and memoization.

In Functional and UI Code

  • Business logic functions are tried to be made pure, and side effects are moved to separate layers.
  • In React, side effects are performed in useEffect, not during rendering.
  • In Redux, side effects are not allowed in reducers — for them there are middleware (Thunk, Saga).

Minimal Example

// side effect: mutates external array
const addItem = (item) => list.push(item);

// pure: returns new array
const addItemPure = (list, item) => [...list, item];

Important Notes

  • Side effects are not "bad" — they are inevitable, but must be controlled and localized.
  • In an interview, it is important to explain the difference between pure logic and side-effectful operations and why UI frameworks separate these parts.

On this page