React shouldComponentUpdate（）不会阻止重新渲染

Question

I'm using the ThreeDisplay React component shown below for holding a WebGL/Three.js canvas (the canvas itself is not part of the component, it gets appended to the container div by an initialization script).

I want the component only to update after every RUN and UPDATE action. Those actions get dispatched by the parent component of ThreeDisplay .

Now for some reason, the component also gets updated/re-rendered if the last action was FADE_COLOR or SWITCH_COLOR . Those actions get dispatched by ThreeDisplay, they are triggered by mouse events, as shown in the code below.

I'm trying to use shouldComponentUpdate() to update only after the aforementioned actions. But for some reason, this does not prevent the component to re-render on every mouse event.

The full code of my application/prototype can be found in this repository

    import React from 'react'
    import {connect} from 'react-redux'

    import {fadeColor, switchColor} from '../actions'

    class ThreeDisplay extends React.Component {
        shouldComponentUpdate(nextProps) {
            const shouldUpdate =
                nextProps.lastAction === 'RUN' || nextProps.lastAction === 'UPDATE'

            if (!shouldUpdate) {
                console.log('ThreeDisplay will not update on ' + nextProps.lastAction)
            }

            return shouldUpdate
        }

        componentWillUpdate() {
            // This gets logged even if lastAction ist not 'RUN' or 'UPDATE'
            console.log('ThreeDisplay will update on ' + this.props.lastAction)
        }

        render() {
            return (
                <div
                    id="container"
                    className={
                        this.props.running
                            ? 'three-display'
                            : 'three-display hidden'
                    }
                    onClick={this.props.switchColor}
                    onMouseMove={this.props.fadeColor}
                />
            )
        }
    }

    const mapStateToProps = state => {
        return {
            running: state.running,
            lastAction: state.lastAction
        }
    }

    const mapDispatchTopProps = dispatch => {
        return {
            fadeColor: e => dispatch(fadeColor(e)),
            switchColor: () => dispatch(switchColor())
        }
    }

    export default connect(mapStateToProps, mapDispatchTopProps)(ThreeDisplay)

Answer 1

In this expression

const shouldUpdate = nextProps.lastAction === 'RUN' || 'UPDATE'

If nextProps.lastAction === 'RUN' is false, then the code evaluates the other branch of the OR, ie just the 'UPDATE' string, which is always true, thus shouldUpdate will always be true.

Replace it with

const shouldUpdate = nextProps.lastAction === 'RUN'
  || nextProps.lastAction ===  'UPDATE'