title: State Management with React and Web Audio
body: <p>I'm trying to write a module-based music application using the Web Audio API and React. </p>
  
  <p>Up until this point, I've been creating web audio nodes such as Filters, Oscillators etc. as the React components are created:</p>
  
  <pre><code>class Filter extends React.Component {
      constructor(props) {
          super(props);
          const filter = props.context.createBiquadFilter();
          this.state = { filter };
      }
  ...
  </code></pre>
  
  <p>Later on, this means it's possible to alter the filter as part of the component's state:</p>
  
  <pre><code>    frequencyChange(event) {
          ...
          this.state.filter.frequency.setValueAtTime(range.value, context.currentTime);
      }
  </code></pre>
  
  <p>and in the render method:</p>
  
  <pre><code>&lt;input type="range" className="slider" min={20} max={20000}
                     onChange={event =&gt; this.frequencyChange(event)}/&gt;
  </code></pre>
  
  <p>However, when it comes to chaining filters together, I need to be able to <code>disconnect()</code> the Web Audio filter node I've created from the parent class of this component, and <code>connect()</code> it to a new destination.</p>
  
  <p>Let's say the parent component is called <code>EffectsBox</code>, and is intended to render an arbitrary list of effects like <code>Filter</code>. </p>
  
  <ul>
  <li><p>How should it render all these components, as well as allowing them to expose some common API for chaining audio together?</p></li>
  <li><p>Where should the state – i.e. the web audio components – for these effects be stored? </p></li>
  </ul>
  
  <p>Here's some example code to hopefully make my question clearer:</p>
  
  <pre><code>class EffectsBox extends React.Component {
      ...
  
      addNewEffect(effect) {
          // disconnect() the previous effect and connect() it to a new one 
      }
  
      render() {
          // Maybe some kind of "map" here between effects and react components?
          return &lt;div&gt;{ this.state.effects }&lt;/div&gt;
      }
  </code></pre>
  
  <p>N.B. – I've read about React's <code>refs</code> API, but it doesn't seem suitable for use with an arbitrary number of child classes – very happy to be shown otherwise though!</p>