How to prevent re render of a component on change of a particular prop?

Question

I want to prevent component update whenever a particular propis updated (with different or same value, doesn't matter).

I have tried

shouldComponentUpdate(nextProps) {
        return this.props.random === nextProps.random;
}

which will basically prevent update whenever prop is changed with different value. what if prop is updated with same value ? it doesnt cover that.

solution ?

Answer 1

If you want this component to never rerender, then return false

shouldComponentUpdate() {
  return false;
}

If you want to check if other props changed, but ignore this specific prop, then check those other props. Return true if they changed, or false if they're all fine.

shouldComponentUpdate(nextProps) {
  return nextProps.foo !== this.props.foo || nextProps.bar !== this.props.bar;
}