title: Modifying a React component with a user script
body: <h2>Short version</h2>
  
  <p>How can I modify a React component with a user script (e.g. code injected by Tampermonkey) without breaking the app when I don't have access to the original source?</p>
  
  <h2>Longer version</h2>
  
  <p>Modifying the DOM of a React component directly can break the app because the <a href="https://reactjs.org/docs/reconciliation.html" rel="noreferrer">reconciliation algorithm</a> can get confused by manual DOM changes. Hence, I would like to modify a React component in my user script so React can keep rendering unhindered.</p>
  
  <p>In a simple setup, React discovers components in the global namespace, and we can modify a component easily (see <a href="https://jsfiddle.net/8b2d5vLj/4/" rel="noreferrer">this fiddle</a> for a working example):</p>
  
  <pre><code>oldComponent = Component
  function Component(props) {
    // modify the props to change the appearance of the component
    return oldComponent(modifiedProps);
  }
  </code></pre>
  
  <p>However, the situation is more complex when the application is deployed because the components are typically bundled using <a href="https://webpack.js.org/" rel="noreferrer">webpack</a>. How would I be able to reproduce the example above in an application whose components have been bundled?</p>