Is it right to change state immediately before calling setState ()?

Question

I use lightweight ORM to connect my application to an external service ... This package returns the objects of your model and allows you to perform operations directly against them. Although it’s really amazing, I’m struggling to figure out how I can turn these objects stateon and still follow “never modify the state directly” to react to it.

If I had a component that updated the account name, would it be acceptable to do something like this?

interface IAppState {
  account: Account
}

class App extends React.Component<{}, IAppState> {
  constructor(props) {
    super(props);
    this.state = {
      account: new Account()
    }
  }

  //set the new name and update the external service
  public updateAccount = (newName: string)=>{
    account.name = newName; //REDFLAG!!!
    acc.update().then(()=>{
        this.setState({ account: this.state.account })
    })
  }

  //retrieve our account object from external service
  public componentDidMount() {
    const qParams = queryString.parse(window.location.search);
    Account.get(qParams.externalId).then((acc)=>{
        this.setState({account: acc})
    })
  }

  render() {
    return <NameEditor handleClick={this.updateAccount} account={a} />
    }
 }

, , ORM, , , . , ORM ORM-, .

, "" " "???

Update

- , , , , react/addons... , , ORM ? , insert .

Answer 1

public updateAccount = (newName: string)=>{
    //account.name = newName; //REDFLAG!!!
    // You can use the below code to update name after it is updated
    // on server.
    // This will work because the object being passed here
    // will be merged with Component state.
    acc.update().then(()=>{
        this.setState({account: {name : newName}})
    })
}

, , .

Virtual DOM DOM . diffing algorithm .

Answer 2

React . Object.assign immutable.js , . , .

.

https://facebook.imtqy.com/react/docs/optimizing-performance.html#examples