How to not re-render React component's specific DOM elements?

Question

Recently I started to refactor my Backbone web app with React and I'm trying to write interactive graph visualization component using react and sigma.js.

I roughly understood React's declarative paradigm and how it is implemented by render() method using jsx syntax.

But what gets me stumbled is a situation where I cannot define my React component declarativly.

It is because of the javascript-generated DOM elements, which only can be generated on componentDidMount() after the declarative DOM elements are rendered by render().

It makes me worried about both performance and buggy animations (my graph animates on instantiation time, which will be re-played on every render() calls in this situation)

My current code looks like:

...

render: function() {
  return (
    <div class="my-graph-visualization-component">
      {/*
          This div is defined declaratively, so won't be re-rendered
          on every `change` events* unless `React`'s diff algorithm 
          think it needs to be re-rendered.
      */}
      <div class="my-declarative-div">{this.props.text}</div>

      {/*
          This div will be filled by javascript after the `render()`
          call. So it will be always cleared and re-rendered on every
          `change` events.
      */}
      <div class="graph-container MY-PROBLEM-DIV"></div>
    </div>
  );
},

componentDidMount: function() {
  this.props.sigmaInstance.render('.graph-container', this.props.graph);
}

...

Is there any way to do something like

render: function() {
  return (
    <div class="my-graph-visualization-component">
      <div class="my-declarative-div">{this.props.text}</div>

      {/* 
          Any nice workaround to tell react not to re-render specific
          DOM elements? 
      */}
      <div class="graph-container NO-RE-RENDER"></div>
    </div>
  );
},

so that my sigma.js graph component won't get re-instantiated with identical starting animation on every change on states?

Since it seems to be it is about handling non-declarative part of react components, any workarounds for this kind of problem will be appreciated.

Answer 1

The cleanest way is to define react sub-components and re-render what you really need instead of re-rendering the whole block

render: function() {

    return (
       <div class='myStaticContainerNotupdated'>
           <SubComponentToUpdateOften/>
           <MyGraph/>
       </div>
    )

}

The other solution could be to work on your graph and implement a singleton so your animation is only played once at the first render.

But really the easiest and cleanest thing I see is to create clean separate subcomponent and update them when needed. You never update the big container component just the subs one.

Hope it helps