在没有 setState 的情况下反应推送到状态变量

Question

Lately I've been working on a React app.

In one of the pages which was suffering from slow load, I discovered there was some updates to state, and those variables where not meant to be shown to end user, and they were there to be checked later when some event was raised.

Since those were arrays, I mutating the state directly and event without "setState"ing it (I know mutating the variable is not recommended at all!). Later when the Event was raised, state variable had correct data and since redundant "setState"s where removed, the page had a significant speed boost and the problem was solved.

Anyone has any similar experiences with "setState" in react? What do you think about this?

Answer 1

...I discovered there was some updates to state, and those variables where not meant to be shown to end user...

Then they shouldn't be part of state, they should just be properties on the instance (in a class-based component, which I assume you're using; variables you close over in a functional component). state should only contain things that, when changed, cause a re-render. For that reason, you should only change them via setState , so the render is triggered. You're getting away with breaking the rule because what you're changing isn't related to rendering.

Never mutate the state object (or any objects it refers to) directly. But you can mutate non-state properties (or things you close over), that's fine.

Answer 2

If you need those variables to be stored in actual state but them does not have to trigger a render you probably need to implement shouldComponentUpdate lyfecycle callback:

shouldComponentUpdate(nextProps, nextState) {
        return nextState.myPropertyThatTriggersRender != this.state.myPropertyThatTriggersRender;
    }

Doing that, if all your state's properties that trigger render are checked, other state properties won't trigger a render . But will be still available in state object .

In order to improve performances, you can implement the same check on the child elements (if they are components) that are going to be rendered.

shouldComponentUpdate(nextProps, nextState) {
        return nextProps.myPropThatTriggersRender != this.props.myPropThatTriggersRender;
    }

From React's DOC:

Use shouldComponentUpdate() to let React know if a component's output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.