title: Reactjs: how to share a websocket between components
body: <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>