Reactjs: how to share a websocket between components
<p>I'm new to React and I'm having some issues regarding components structure and sharing a websocket between them.</p>

<p>The app consists of categories and products. The initial data load will be done with an Ajax request and a websocket will be used keep data updated.</p>

<p>My component hierarchy looks like this:</p>

<ul>
<li>CategoriesList

<ul>
<li>Category

<ul>
<li>ProductsList

<ul>
<li>Product</li>
</ul></li>
</ul></li>
</ul></li>
</ul>

<p>CategoriesList holds the state of categories and ProductsList holds the state of products within a category.</p>

<p>So I would like to use the same websocket inside CategoriesList and ProductsList but listening to different websocket events: category:updated and product:updated.</p>

<p>How do I share the websocket between components and where is the right place to initialize it?</p>

<p>Since there is one ProductsList for each Category, does this means that the products:updated event will fire multiple times ( one for each category )? I guess this isn't a good thing in terms of performance.</p>