Почему обновляется значение useState?

Question

[Paul14]

При нажатии на кнопку я могу задать объекту obj (из useState) любое свойство sorting.
obj.sorting = 'byAge';
и на следующем рендере оно будет сохранено в объекте. Почему значение не остается дефолтным, как я задал вначале? Разве это не главный принцип реакта?

Ок. Если даже я изменил свойство объекта, а внутри useState хранится только ссылка на этот объект, то зачем во всех туториалах используют такой код?
setObj({...obj, sorting:'byAge' })
если можно просто задать значение свойству объекта напрямую и будет тоже самое.
obj.sorting = 'byAge';

Ссылка на сандбокс

export default function App() {
  const [obj, setObj] = useState({
    someParameter: "anything",
    sorting: "byName"
  });
  const [count, setCount] = useState(0);

  console.log(`COUNT: ${count}  OBJECT:`, obj);

  const changeObj = () => {
    obj.sorting = 'byAge';
    setCount(count + 1);
    //setObj({...obj, sorting:'byAge' }) ???????
  };



  return (
    <div className="App">
      <h1>{obj.sorting}</h1>
      <p>{obj.someParameter}</p>
      <button onClick={(e) => changeObj()}>CHANGE useState</button>
    </div>
  );
}

Comments

[szQocks]

Мутировать стейт является плохой практикой
Мутирование стейта не вызывает ререндер

И

obj.sorting = 'byAge';
setObj(obj) // не вызывает ререндер, потому что ссылка на объект осталась старой несмотря на то что данные изменились

[szQocks]

По факту твой пример - рабочий, но это считается говнокод.

[Paul14]

szQocks, я так понимаю каждый раз в таких случаях нужно делать так

obj.sorting = 'byAge';
setObj({...obj})

[szQocks]

Paul14, можешь делать и так, но это тоже самое что и это

setObj({...obj, sorting:'byAge' }) // но этот вариант лучше

потому что как я уже сказал ранее

Мутировать стейт является плохой практикой

obj.sorting = 'byAge'; // это и есть мутация

[Paul14]

szQocks, Спасибо! Я вас понял. Просто ситуация возникает, когда приходится изменять один параметер у группы объектов. Тут видимо без мутации не обойдется, потому как targetObject все равно остается ссылкой на объект внутри obj.

const [obj,setObj] = useState([{...},{...},{...}])
... 
setObj(  
  [...obj].map( targetObject =>{
    targetObject.someValue = 0;
    return targetObject ;
  }
))

[szQocks]

Paul14, map возвращает новый массив, поэтому ссылки не остаются, здесь нет мутаций + к тому же явно ты создаешь новый массив куда разворачиваешь массив obj, дважды создаётся новый массив грубо говоря

[szQocks]

Paul14, хотя ошибаюсь, ты был прав он их мутирует, но так как в useState заносится уже новая ссылка на массив - то при вызове setObj потом будет ререндер где данные обновятся

массив новый, несмотря на то что ссылки у объектов внутри старые, поэтому ререндер будет

const [obj,setObj] = useState([{...},{...},{...}])
... 
setObj(  
  [...obj].map( targetObject =>{
    targetObject.someValue = 0;
    return targetObject ;
  }
))

я джун, так что мне можно ошибаться, но всё равно караю себя за такие мелочи, удачи друг)

Пример

[Алексей]

Paul14, никакой мутации тут не нужно, в вашем примере можно сделать так:

const newState = obj.map(item => ({...item, someValue: 0}));
setObj(newState);

если хотите мутации, то возьмите mobx, там для вас намного понятней будет
или используйте immer, например, который за вас иммутабельность поддерживать будет

[Paul14]

Алексей, я бы хотел как раз обратного) Без мутаций. Чтобы всегда быть уверенным , что у меня obj (useState) будет лежать именно тот объект, который я задаю через "setObj" или инициации. А то потом где то косяк вылезет и голову ломать полнедели)

[Алексей]

Paul14, ну тогда использовать immer, если кажется, что могут быть проблемы, но я его никогда не использовал специально, разве что в redux-toolkit, т.к. он по-умолчанию там есть