<p dir="auto">The various React addons express a peer dependency on their matching React version. You can write a React component library that runs with multiple versions of React but depends on some specific addons as an implementation detail:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
  &quot;name&quot;: &quot;my-awesome-library&quot;,
  ...
  &quot;dependencies&quot;: {
    &quot;react-addons-update&quot;: &quot;^0.14.0 || ^15.0.0&quot;
  },
  &quot;peerDependencies&quot;: {
    &quot;react&quot;: &quot;^0.14.0 || ^15.0.0&quot;
  }
}"><pre class="notranslate"><code class="notranslate">{
  "name": "my-awesome-library",
  ...
  "dependencies": {
    "react-addons-update": "^0.14.0 || ^15.0.0"
  },
  "peerDependencies": {
    "react": "^0.14.0 || ^15.0.0"
  }
}
</code></pre></div>
<p dir="auto">If you consume this library in a host environment that uses react@14, npm will still helpfully install the latest version of react-addons-update, which of course peer-depends on react@15, causing rather confusing UNMET PEER DEPENDENCY warnings since I, the consumer, am only looking around the <code class="notranslate">peerDependencies</code> block for version issues.</p>
<p dir="auto">So my question is this: what are best practices for a library in this situation? Should I declare react-addons-update as a peer dependency, meaning that my consumer has to personally install not just React itself but also every react-addons-* that any of their dependents use? Seems annoying to my consumer and also a sort of an abstraction break for the sake of version matching.</p>
<p dir="auto">Perhaps react-addons-* should be more independently versioned so they accept multiple versions? Or maybe not declare a peer dependency on React if they don't actually need it (like for react-addons-update, which only uses a couple of the small, non-React-core utilities)?</p>
<p dir="auto">For reference. We're exploring an alternative to the <code class="notranslate">observe</code> function proposed in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="60965610" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/3398" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/3398/hovercard" href="https://github.com/facebook/react/issues/3398">#3398</a>.</p>
<p dir="auto">Instead of having a separate function that defines a list of dependencies on Observables, we could allow the render function itself trigger a bunch of side-effects that registers the currently executing component with some Observables.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="render() {
  var data = request(this.props.url);
  if (data === null) return &lt;div&gt;Loading...&lt;/div&gt;;
  return &lt;div&gt;{data}&lt;/div&gt;;
}"><pre class="notranslate"><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">var</span> <span class="pl-s1">data</span> <span class="pl-c1">=</span> <span class="pl-en">request</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">url</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">data</span> <span class="pl-c1">===</span> <span class="pl-c1">null</span><span class="pl-kos">)</span> <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>Loading...<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
  <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">data</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Side-effects! 😲</p>
<p dir="auto">The implementation of request wouldn't return an Observable. Instead it would tell React that the currently executing component has a dependency on this Observable and needs to rerender anytime the subscription fires. It returns the last value received by this particular Observable... somehow.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function request(url) {
  return React.readAndSubscribe(Observable.fetch(url));
}"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-en">request</span><span class="pl-kos">(</span><span class="pl-s1">url</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">readAndSubscribe</span><span class="pl-kos">(</span><span class="pl-v">Observable</span><span class="pl-kos">.</span><span class="pl-en">fetch</span><span class="pl-kos">(</span><span class="pl-s1">url</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">If an Observable is no longer subscribed to in the next render pass, it is automatically unsubscribed. Perhaps the Observable API is not ideal for this model.</p>