In React 16.9, directly updating the state without setState updates UI

Question


export default class Concepts extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            user: {
                name: 'Mayank'
            }
        }
    }

    changeUserData = () => {
        this.state.user.name = "Anshul";
    }

    render() {
        return (
            <div>
                <h1>{this.state.user.name}</h1><br></br>
                <input type="button" onClick={this.changeUserData} value="Click To Change" />
            </div>
        )
    }
}

Even without using "setState" in React 16.9, the UI is updating.

In React 16.8, we need to call "forceUpdate", is it a problem on my side.

I just tested this, that is not what happens. Also, your onclick won't work either. Also, use setState... better yet use hooks. This is just bad code, not to hurt your feelings, but it is just bad. Don't do this. Use setState, or again, better yet, hooks. — Adam LeBlanc, Sep 20 '19 at 18:39
@AdamLeBlanc the `onClick` most definitely works... the handler is broken... if you change it to `setState` vs mutating the state direclty, everything works fine and looks fine. There is only 1 problem with OP's code... — Matt Oestreich, Sep 20 '19 at 19:07
Possible duplicate of [Why can't I directly modify a component's state, really?](https://stackoverflow.com/questions/37755997/why-cant-i-directly-modify-a-components-state-really) — Emile Bergeron, Sep 20 '19 at 19:26
It could look like it works because something else triggers a rerender, but it is definitely not a feature nor a bug. Immutability is not enforced within the code, but it is highly encouraged you follow the guidelines and rules around React to avoid problems that are surprisingly difficult to fix. — Emile Bergeron, Sep 20 '19 at 19:34

Praud · Answer 1 · 2019-09-20T20:23:44.763

1

You should avoid mutating the state directly and instead use setState or use hooks.

const [user, changeUser] = React.useState({ name: 'Roy' })
//...
changeUser(user => ({ ...user, name: 'David' }))}

edited Sep 20 '19 at 20:23

answered Sep 20 '19 at 19:46

Praud

297
3
13

score -1 · Answer 2 · answered Sep 20 '19 at 18:40

-1

Change to:

 changeUserData = () => {

    this.setState({
        user: {name:"Anshul"}
});}

answered Sep 20 '19 at 18:40

Oleg

3,580
1
7
12

2

Read the 'question' again. – Matt Oestreich Sep 20 '19 at 18:50
Where did you found that the direct state update is official mutation state feature of 16.9? – Oleg Sep 20 '19 at 18:56
1

Read the 'question' again. – Matt Oestreich Sep 20 '19 at 19:00
It ISN'T a feature... OP is saying that in React 16.9 you are able to mutate state directly, which would be a MASSIVE bug....... That is the ENTIRE point... Mutating state directly is not a feature, it's not supposed to be allowed. – Matt Oestreich Sep 20 '19 at 19:02
If you found a bug you can post it in related GitHub react project issues. – Oleg Sep 20 '19 at 19:04
1

There is no bug.... I am not sure what OP is referring to... I created a brand new app using `create-react-app` with React 16.9 and could not reproduce this "issue".... There is no bug.. there is no issue.... nothing is wrong... THIS IS POINTLESS. – Matt Oestreich Sep 20 '19 at 19:05
After all, you are using wrong pattern and you know about it, what is your problem? – Oleg Sep 20 '19 at 19:14

In React 16.9, directly updating the state without setState updates UI

2 Answers2