Почему в React состояние должно быть иммутабельным?

Почему в React состояние должно быть иммутабельным?

Иммутабельность состояния — это один из ключевых принципов React, который обеспечивает корректность работы компонентов, оптимизацию производительности и предсказуемость поведения. Это не просто рекомендация, а необходимое условие для нормального функционирования React.

Основная причина: Детектирование изменений

React использует механизм сравнения (reconciliation) для определения, что изменилось и нужно ли перерендерить компонент. Проблема возникает при мутировании объектов:

// НЕПРАВИЛЬНО - мутирование состояния
const [user, setUser] = useState({ name: 'John', age: 30 });

function updateName() {
  user.name = 'Jane'; // Мутация!
  setUser(user);      // React НЕ заметит изменения
}

// Почему не работает?
// React сравнивает: prevState === nextState
// Это один и тот же объект, поэтому === вернёт true
// Компонент не перерендерится!

// ПРАВИЛЬНО - создание нового объекта
function updateName() {
  setUser({ ...user, name: 'Jane' }); // Новый объект
}

// Теперь React видит, что это другой объект
// prevState !== nextState => true
// Компонент перерендерится

Причина 1: Неправильное детектирование обновлений

React использует поверхностное сравнение (shallow comparison) для проверки изменений:

const [data, setData] = useState({
  user: { name: 'John', age: 30 },
  posts: [1, 2, 3]
});

// НЕПРАВИЛЬНО
function addPost() {
  data.posts.push(4);        // Мутируем массив
  setData(data);             // Передаём тот же объект
  // React думает: data.posts === data.posts (один и тот же массив)
  // Компонент НЕ перерендерится!
}

// ПРАВИЛЬНО
function addPost() {
  setData({
    ...data,
    posts: [...data.posts, 4] // Новый массив
  });
  // React видит: data.posts !== data.posts (разные массивы)
  // Компонент перерендерится
}

Причина 2: Оптимизация производительности (React.memo, useMemo)

Оптимизации производительности полагаются на иммутабельность:

// React.memo помогает избежать ненужных рендеров
const UserCard = React.memo(({ user }) => {
  console.log('Rendering UserCard');
  return <div>{user.name}</div>;
});

function App() {
  const [user, setUser] = useState({ name: 'John', age: 30 });
  const [count, setCount] = useState(0);

  // НЕПРАВИЛЬНО
  const handleIncrement = () => {
    setCount(count + 1);
    user.age += 1; // Мутируем
    setUser(user);  // React.memo НЕ защитит от рендера
  };
  // Каждый раз, когда меняется count, user объект остаётся одним и тем же
  // Но поскольку мы его мутировали, компонент всё равно перерендерится

  // ПРАВИЛЬНО
  const handleIncrement = () => {
    setCount(count + 1);
    setUser({ ...user, age: user.age + 1 }); // Новый объект
  };
  // Теперь React.memo может сравнить старый и новый user
  // Если изменился только count, UserCard НЕ перерендерится

  return (
    <div>
      <button onClick={handleIncrement}>Count: {count}</button>
      <UserCard user={user} />
    </div>
  );
}

Причина 3: Предсказуемость и отладка

Мутирование делает код непредсказуемым и сложным для отладки:

// ПЛОХО - множественные мутации
const [obj, setObj] = useState({ a: 1, b: 2 });

function complexUpdate() {
  obj.a = 5;           // Мутация 1
  obj.b = 10;          // Мутация 2
  obj.c = { d: 20 };   // Мутация 3
  setObj(obj);         // Одно обновление
  
  console.log(obj);    // obj.a, obj.b, obj.c ВСЕ изменились
  // Но React может вообще не заметить!
}

// ХОРОШО - чистый код
function complexUpdate() {
  const newObj = {
    ...obj,
    a: 5,
    b: 10,
    c: { d: 20 }
  };
  setObj(newObj);
  // Ясно видно, что изменилось
}

Причина 4: Работа с асинхронным кодом

Мутирование при асинхронном коде приводит к ошибкам:

const [user, setUser] = useState({ name: 'John', email: '' });

// НЕПРАВИЛЬНО
async function updateUser() {
  user.email = 'john@example.com'; // Мутация
  
  const response = await fetch('/api/user', { method: 'POST' });
  
  user.name = 'Jane'; // Мутация (пока запрос в пути)
  setUser(user);      // Отправляем объект, который был изменён множество раз
  
  // К этому моменту user может быть совсем не тот, что был в начале
}

// ПРАВИЛЬНО
async function updateUser() {
  const updatedUser = { ...user, email: 'john@example.com' };
  
  const response = await fetch('/api/user', { method: 'POST' });
  
  setUser({ ...updatedUser, name: 'Jane' });
  
  // Ясное управление состоянием
}

Причина 5: Time-travel debugging (Redux DevTools)

Иммутабельность необходима для отката состояния во времени:

// Со 100% иммутабельностью можно просто переключаться между версиями:
const history = [
  { count: 0 },  // Начальное состояние
  { count: 1 },  // После первого клика
  { count: 2 }   // После второго клика
];

// Можно откатиться на любое состояние
setCount(history[0].count); // Вернулись к началу

// С мутациями это невозможно, потому что все версии указывают на один объект
const mutableHistory = [
  obj, // { count: 2 } - МУТИРОВАЛ!
  obj, // { count: 2 } - МУТИРОВАЛ!
  obj  // { count: 2 } - МУТИРОВАЛ!
];

Практический пример: управление состоянием

function TodoApp() {
  const [todos, setTodos] = useState([]);

  // НЕПРАВИЛЬНО
  const addTodoWrong = (title) => {
    todos.push({ id: Date.now(), title }); // Мутация
    setTodos(todos);
  };

  // ПРАВИЛЬНО - добавление
  const addTodo = (title) => {
    setTodos([...todos, { id: Date.now(), title }]);
  };

  // ПРАВИЛЬНО - редактирование
  const editTodo = (id, newTitle) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, title: newTitle } : todo
    ));
  };

  // ПРАВИЛЬНО - удаление
  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  // ПРАВИЛЬНО - вложенное обновление
  const updateNestedField = (id, newData) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, ...newData } : todo
    ));
  };

  return (
    <div>
      {todos.map(todo => (
        <div key={todo.id}>
          {todo.title}
          <button onClick={() => deleteTodo(todo.id)}>Delete</button>
        </div>
      ))}
    </div>
  );
}

Итог

Иммутабельность состояния в React необходима потому, что:

1. Детектирование изменений — React сравнивает ссылки объектов, а не их содержимое
2. Оптимизация производительности — React.memo, useMemo, shouldComponentUpdate полагаются на иммутабельность
3. Предсказуемость — код легче понять и отладить
4. Асинхронный код — правильное управление состоянием в промежуточных операциях
5. Time-travel debugging — возможность отката состояния

Привычка создавать новые объекты вместо мутирования старых — это основа надёжного React кода.