I am storing a UI state in the React ponent'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 bees 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: but didn't find anything.

I am storing a UI state in the React ponent'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 bees 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./facebook/react/issues/8598 but didn't find anything.

• javascript
• reactjs

• 1 Sounds like you want to hack the behaviour of your ponent. What do you think, how long will it last untill you'll need to hack the hack? Why don't you explain what exactly you're building and what problem you have. Or in other terms, what actual problem leads to this hack you're trying. – Thomas Commented Oct 16, 2017 at 11:19
• actually, I did not mean to hack.. I just wanted to know if I could avoid an unnecessary render... Nothing goes wrong even if render occurs :) – Dane Commented Oct 16, 2017 at 17:15
• this should be solve by shouldComponentUpdate(). – Underdog Commented Apr 29, 2019 at 18:06

2 Answers 2

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 bees 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 ponent 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.

What about useRef?

Documentation says: useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the ponent.

So if you change ref value inside useEffect it won’t rerender ponent.

  const someValue = useRef(0)
  useEffect(() => {
    someValue.current++
  },[])