React renderComponentToString use cases

Recently I was presented with a pretty cool challenge. Create a photo gallery from a macro inside of an article that looks like this: [Gallery:1234,4567,7890]. The numbers being MediaIds. Obviously this is a RegExp problem and I'll spare you that part of the implementation, but once we have our ids and images we obviously want instatiate a React component but how do we get it inline with the rest of the article content?

This is where renderComponentToString comes to the rescue:

replaceMacro: (htmlStr) => {  
  var galleryRegex = /\[Gallery:\s?([\s\d,])\]/i;
  var ids = htmlStr.match(htmlStr)[1].split(',').map((id) => parseInt(id, 10));
  var renderedGallery = React.renderComponentToString(<ImageGallery imageIds=ids/>);
  return htmlStr.replace(galleryRegex, renderedGallery)
};

I don't know if the event handlers get bound in this case. We use a jQuery gallery which get initialized after the gallery is in the DOM, So I suspect that might be saving us from having the events not getting bound.

The React documentation reccomends using renderComponentToString on the server probably for SEO purposes, however as you can see it can be handy in different use cases than that!