Incoming arg to updater cannot be modified

When using the update function from ShiftDB, the prevState argument appears to be ‘read-only’. I’m unaware of any spec which defines such functionality, so as of now I assume this is unintended.

update((someData = { key: [] }) => {
  someData.key.push('item');
  return someData;
});

The above code results in the following error

TypeError: Cannot assign to read only property 'key' of #<Object>

I suggest initially and immediately reverting this to the specced behavior, and then we can open a discussion regarding future design.

[arikmaor]

I don’t mind removing the actual freezing, (also, I think it’s a must in production) For all other means, this should be considered immutable to allow us to handle the data changes for the user more efficiently. I would also like to stay consistent with React.setState

React Documentation

from: https://reactjs.org/docs/state-and-lifecycle.html#using-state-correctly

Do Not Modify State Directly For example, this will not re-render a component:

// Wrong this.state.comment = ‘Hello’; Instead, use setState():

// Correct this.setState({comment: ‘Hello’}); The only place where you can assign this.state is the constructor.

So in react it’s not allowed and frowned upon mutating the state. The whole react mechanism works on the assumption that everything is immutable.

React with TypeScript

I wrote this code:

import React from 'react';

interface MyComponentProps {
}

interface MyComponentState {
  something: string;
}

export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {

  state = {
    something: 'bla',
  }

  doSomething = () => {
    this.state.something = 'wrong'; // No TypeScript warning here, though it's documented not to change this
    this.setState((state) => {
      state.something = 'else'; // (property) [something: string] Cannot assign to 'something' because it is a read-only property.ts(2540)
      return state;
    });
  }

  render() {
    return <div>{this.state.something}<button onClick={this.doSomething}>bla</button></div>
  }
}

So leaving this object read only is perfectly consistent with React

[ashevat]

LGTM, pending our launch and user feedback.