Calling setState without triggering re-render

Question

I am storing a UI state in the React component's state, say this.state.receivedElements which is an array. I want re-renders whenever an element is pushed to receivedElements. My question is, can I not trigger rendering when the array becomes empty ?
Or in general, can I call setState() just one time without re-render while re-rendering all other times ? ( are there any options, work-arounds ? )
I've read through this thread: https://github.com/facebook/react/issues/8598 but didn't find anything.

Answer 1

I want re-renders whenever an element is pushed to receivedElements.

Note that you won't get a re-render if you use:

this.state.receivedElements.push(newElement); // WRONG

That violates the restriction that you must not directly modify state. You'd need:

this.setState(function(state) {
    return {receivedElements: state.receivedElements.concat([newElement])};
});

(It needs to be the callback version because it relies on the current state to set the new state.)

My question is, can I not trigger rendering when the array becomes empty ?

Yes — by not calling setState in that case.

It sounds as though receivedElements shouldn't be part of your state, but instead information you manage separately and reflect in state as appropriate. For instance, you might have receivedElements on the component itself, and displayedElements on state. Then:

this.receivedElements.push(newElement);
this.setState({displayedElements: this.receivedElements.slice()});

...and

// (...some operation that removes from `receivedElements`...), then:
if (this.receivedElements.length) {
    this.setState({displayedElements: this.receivedElements.slice()});
}

Note how we don't call setState if this.receivedElements is empty.