why do we need to have component state variables inside predefined state object of component when we can just call setState({}) to re-render the page

Question

In all react tutorials that i have seen, variables which are responsible for changing the content of the component are kept in state object and calling setState() method updates those variables and re-renders the page. From further reading it seemed that only function of this setState() method was to re-render the page

My Question is if setState() is just used for re-rendering why not just keep the state object empty, declare all your dynamic content changing variables as class attributes like you normally do and call this.setState({}) whenever you want to re-render.

So what is the use of keeping variables inside state object? When does above technique fail?

example instead of:

class Button1 extends Component {

constructor() {
    super();
    this.state = {
        counter: 0,
    };
}

incrementCounter = () => {
    this.setState({counter:this.state.counter+1,message:""})
};

render() {
    return (
        <div>
            <button onClick={()=>{this.incrementCounter()}}> Click </button>
            <p>{this.state.counter}</p>
        </div>
    );
}
}

i could do:

class Button2 extends Component {

constructor() {
    super();
    this.counter=0;
}

refresh(){
    this.setState({});
}

incrementCounter = () => {
    this.counter+=1;
    this.refresh();
};

render() {
    return (
        <div>
            <button onClick={()=>{this.incrementCounter()}}> Click </button>
            <p>{this.counter}</p>
        </div>
    );
}
}

i personally like 2nd approach? What are its pitfalls?

And what if you want an non dynamic variable inside the same class then?. — Sandeep Ranjan, Aug 07 '19 at 01:52
let it be there. I will call setState() method whenever some event that changes variables occur. And most importantly, setState() method re-renders whole Virtual DOM independent of any change anyways. — iro otaku, Aug 07 '19 at 02:11

score 1 · Answer 1 · answered Aug 07 '19 at 02:17

1

calling setState does not simply just re-render the page, it rerenders if it notices that something changed on the screen that needs a rerender and rerenders that certain part which makes it much more efficient than just rerendering the whole page constantly.

answered Aug 07 '19 at 02:17

tytyf

342
1
2
11

Yes it re-renders only changed part but that partial rendering it performs on Actual DOM. Virtual DOM is always re-rendered completely by default when setState() is called – iro otaku Aug 07 '19 at 02:25
here is a nice answer on that matter- [link] (https://stackoverflow.com/questions/24718709/reactjs-does-render-get-called-any-time-setstate-is-called?rq=1) – iro otaku Aug 07 '19 at 02:25

score 0 · Answer 2 · answered Aug 07 '19 at 05:37

The short answer is Yes! you can just setState() when you need a new state variable,

But it's dirty, you might define ten's of states in your component and after a while it will keep getting harder and harder to read your code,

The best approach is to define a state={...} in the root of your component or this.state={...} in the constructor and initiate ALL your needed state variables there.

This way, your code will be easy to read and maintain regardless of how big is your component.

score -1 · Answer 3 · answered Aug 07 '19 at 02:03

-1

You could set any constant variables like that, you just can't change them later with setState and rerender the component. State is meant for variables that are to be changed during the life cycle of the component.

answered Aug 07 '19 at 02:03

Shmili Breuer

3,927
2
17
26

why do we need to have component state variables inside predefined state object of component when we can just call setState({}) to re-render the page

3 Answers3