React: The best way to upgrade yourself, but not let kids update?

Question

I am working on a drag-and-drop implementation (from scratch without using the DND library) and would like to limit the number of unnecessary updates during drag and drop.

Dragging a "clone" (usually a copy of the original element, but can be an arbitrary placeholder) is achieved by updating the state of the container component ("Clonetainer") and using this to apply the transform. However, it makes no sense to update the entire subtree during the move, as the only change is the container cords.

Here is my solution:

const ClonetainerRenderShield = React.createClass({ shouldComponentUpdate: function (newProps) { return newProps.shouldUpdate; }, render: function () { return this.props.children; // Simple pass-through } }); const Clonetainer = React.createClass({ componentWillReceiveProps: function (newProps) { // OR in any further properties that may indicate a move, versus a child update this.isMoveEvent = this.props.offset !== newProps.offset; }, render: function () { const style = { transform: `translate(${this.props.offset.left}px,${this.props.offset.top}px)` }; return <div className="clonetainer-div" style={style}> <ClonetainerRenderShield shouldUpdate={ !this.isMoveEvent }> { this.props.children } </ClonetainerRenderShield> </div>; } }); 

(I will not go into the details of the rest of the DND system, except to say that mouse events from the upstream component provide an offset parameter to Clonetainer.)

The solution I came up with to stop the update included determining whether the Clonetainer update was caused due to a move or for some other reason (and setting this.isMoveEvent accordingly), then smoothing the component between the Clonetainer and its children no more than a shouldComponentUpdate based on the missing prop ( shouldUpdate ).

It works. I tested it in such a way as to show that it is updated when it should and does not update, when it should not, but it looks a bit unnecessary to have a separate gasket component to just block updates from flowing down. Is there a way to indicate that the child component should not be updated from the previous state in render without requiring the child component to include its own shouldComponentUpdate logic?

Answer 1

You should be able to change componentWillReceiveProps to shouldComponentUpdate in the Clonetainer component and cut out the middle person. shouldComponentUpdate takes two parameters (object nextProps, object nextState) , which you can use again to compare this.state and this.props . Returning true will result in reprocessing.

 const Clonetainer = React.createClass({ shouldComponentUpdate: function (nextProps, nextState) { // OR in any further properties that may indicate a move, versus a child update this.props.offset !== nextProps.offset; }, render: function () { const style = { transform: `translate(${this.props.offset.left}px,${this.props.offset.top}px)` }; return <div className="clonetainer-div" style={style}> { this.props.children } </div>; } });