title: Create React context menu on the fly
body: <h1>Question</h1>
  
  <p><strong>Is there a way to create React components (or here more specifically: a context menu) on the fly, i.e. only when the user requested such a context menu?</strong></p>
  
  <p>All the required information for constructing the individual context menu is already present on the component triggering it, meaning there is no need to wait for any async fetching of data.</p>
  
  <p>In other contexts this can be easily achieved, but I can't wrap my head around how this should be done in a React+Redux application.</p>
  
  <hr>
  
  <p>The only thing that comes to mind while writing this, would be to send an action when a context menu is being triggered and include this single context menu as some kind of popup dialog in the resulting re-rendering.</p>
  
  <p>That would at least avoid the premature creation of heaps of invisible components. But it somehow feels like an anti-pattern. What am I missing here?</p>
  
  <hr>
  
  <h2>Background</h2>
  
  <p>The state to be displayed in my React Application is in a hierarchical structure realistically nested up to six or seven levels deep.</p>
  
  <p>On the top level it's a simple list. But each list item has a structure like this:</p>
  
  <pre><code>Item = {
      priorChildren: List&lt;Item&gt;
      content: List&lt;NonHierarchicalData&gt;
      laterChildren: List&lt;Item&gt;
  }
  </code></pre>
  
  <p>These <code>Item</code>s can be nested in any way the user sees fit.</p>
  
  <ul>
  <li>Each <code>Item</code> should offer up to five actions via a context menu depending on its position in the hierarchy (there are probably not more than 10 permutations).</li>
  <li>Each <code>NonHierarchicalData</code> should also offer a context menu depending on its data with potentially up to 30 menu items. Since the data contains user input which is incorporated into the menu items, each context menu is potentially unique.</li>
  </ul>
  
  <p>A realistic state might contain around 30 or 40 of these <code>Item</code>s, each with 5 to 10 <code>NonHierarchicalData</code> element. Based on these numbers I can end up with ca. 250 different context menus consisting of over 5000 menu items.
  At any given time the user will probably only open one or two context menus before selecting an action and thereby triggering a state change and thereby a rerendering.</p>
  
  <h2>Challenge</h2>
  
  <p>On one hand there are great existing libraries like <a href="https://github.com/vkbansal/react-contextmenu" rel="nofollow noreferrer" title="react-contextmenu on GitHub">react-contextmenu</a> which expect all context menu variations to be known upfront and to be created as part of the DOM only to be made visible when required.</p>
  
  <p>On the other hand it feels counter-intuitive to create hundreds of those menus with thousands of entries just to display a few dozen of them before they are inevitably re-created after the next state change.</p>