反应阻止来自父容器的子更新

Question

I'm using a react color picker that changes the state on change (so many times per second). since the state changes my component, and all of its children are being rerendered. I don't have any control over the children as they're imported from other libraries (reactstrap and react-fontawesome) so I need a way to prevent these from updating from the parent containers.

I could create a wrapper component with a custom shouldComponentUpdate() but that solution seems kind of hacky so I'm curious if there's an intended solution for this.

relevant parts of my code:

//all components come from libraries so I have no control over them
    <SketchPicker
       color={this.state.color}
       onChange={this.handleChangeColor}
    />

  handleChangeColor = color => {
    this.setState({ color: color.rgb });
  };

//rest of the code is made of multiple
 <NavItem>
  <NavLink ... >
    <FontAwesomeIcon ... />
  </NavLink>
</NavItem>

some of my navItems rely on the real time color information but most of them dont

Answer 1

If the props you're passing down are not changing you can indeed use shouldComponentUpdate or even better React.PureComponent . PureComponent children won't re-render if the props passed from top level are the same as the previous props. The comparison is shallow so it wouldn't work for deeply nested props.

Read more here .

Answer 2

I you use redux you can use reselect . A selector (props essentially) is not recomputed unless one of its arguments changes.