react-plotly.js and Plotly.js: State Synchronization and Render Performance

Integration Boundary: React State to Plotly.js Engine

When utilizing the react-plotly.js wrapper, the library maps React props to the underlying Plotly.js engine. To maintain performance and user experience, the wrapper utilizes Plotly.react to update the plot without recreating the DOM element, which is intended to preserve the current zoom and pan state during data updates.

However, a challenge arises when dealing with large datasets or in-place mutations. Because React relies on shallow comparisons for props, mutating a data array without changing the object reference may prevent the plot from refreshing. While the revision prop is available to force updates, it introduces a manual synchronization requirement between the React state and the Plotly internal state.

Given these constraints, how does the integration handle the trade-off between shallow prop comparison and the overhead of passing large datasets to the JS engine? Specifically, what is the recommended strategy for triggering updates on mutated data without causing full component re-renders that might degrade performance?