CODEWITHSUNDEEP
javascriptreactjs
softshipper
softshipper

Reputation: 34071

Does render get called immediately after setState?

I have the following function: 

onSelectDepartment = (evt) => {
    const department = evt.target.value;
    const course = null;

    this.setState({ department, course });

    this.props.onChange({ name: 'department', value: department });
    this.props.onChange({ name: 'course', value: course });

    if (department) this.fetch(department);
};

The question is, after the setState function get called, the render function on the component will be executed immediately or after function call is finished?

Upvotes: 3

Views: 1602

Answers (2)

Shivansh Rajolia - HeLleR
Shivansh Rajolia - HeLleR

Reputation: 820

If you are looking execute some piece of code only once the setState is completed you can use below format. 

this.setState({
   flag: true
}, ()=> {
         // any code you want to execute only after the newState has taken effect. 
         })

This is the way to make sure your desired piece of code only runs on the new state.

Upvotes: 0

Mayank Shukla
Mayank Shukla

Reputation: 104379

render function on the component will be executed immediately or after function call is finished?

No one can take the guarantee of when that render function will get called, because setState is async, when we call setState means we ask react to update the ui with new state values (request to call the render method), but exactly at what time that will happen, we never know.

Have a look what react doc says about setState:

setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state. This is the primary method you use to update the user interface in response to event handlers and server responses.

Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.

Check this answer for more details about async behavior of setState: Why calling setState method doesn't mutate the state immediately?

Upvotes: 2

Related Questions