title: Generate svg defs in react component dynamically may case memory leak
body: <p>I'm working on a svg animation that needs generate svg gradient in  element dynamically in realtime as the animation going.</p>
  
  <p>but it seems that the browser wouldn't free the  memory even after it
  has been used or removed from the dom by React.</p>
  
  <p>After hours of research I found this happens if the gradient elements has a id of infinite range(eg Math.random). </p>
  
  <p>Now my question is how can I free that memory without a browser reload?</p>
  
  <p>Thanks.</p>
  
  <p><a href="http://codepen.io/zhaomiing/pen/EmGpRy?editors=0010" rel="nofollow noreferrer">demo</a></p>
  
  <pre><code>class App extends React.Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;svg width="1000" height="500"&gt;
            &lt;Tt&gt;&lt;/Tt&gt;
          &lt;/svg&gt;
        &lt;/div&gt;
      );
    }
  }
  
  
  class Tt extends React.Component {
    constructor(props) {
      super(props);
      this.timer = null;
      this.state = {
        id: 0
      };
    }
  
    componentDidMount() {
      let loop = () =&gt; {
        this.setState({
          id: this.state.id + 1
        }, () =&gt; {
          window.requestAnimationFrame(loop);        
        });
      };
  
      loop();
    }
  
    render() {
      let arr = [];
  
      for(let i = 0; i &lt;= 1000; i++){
        arr.push(Math.random());
      }
  
      return &lt;g&gt;
        &lt;defs&gt;
          {
            arr.map((randomnum, i) =&gt; {
              // define defs gradient with random id
              return (
                &lt;linearGradient id={`r${randomnum}`}&gt;
                  &lt;stop offset="20%" stopColor="#39F" /&gt;
                  &lt;stop offset="90%" stopColor="#F3F" /&gt;
                &lt;/linearGradient&gt;
              )
              // -----problem solved if use i as id---
              // return (
              //   &lt;linearGradient id={`r${i}`}&gt;
              //     &lt;stop offset="20%" stopColor="#39F" /&gt;
              //     &lt;stop offset="90%" stopColor="#F3F" /&gt;
              //   &lt;/linearGradient&gt;
              // )
            })
          }
        &lt;/defs&gt;
        &lt;g&gt;
        {
          arr.map((randomnum, i) =&gt; {
            // use gradient with random id
            return &lt;rect x={Math.random()*1000} y={Math.random()*500} width="100" height="100" fill={`url(#r${randomnum})`}&gt;&lt;/rect&gt;
            // -----problem solved if use i as id---
            // return &lt;rect x={Math.random()*1000} y={Math.random()*500} width="100" height="100" fill={`url(#r${i})`}&gt;&lt;/rect&gt;
  
          })
        }
        &lt;/g&gt;
      &lt;/g&gt;
    }
  }
  ReactDOM.render(
    &lt;App /&gt; ,
    document.getElementById('root')
  );
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/R4aiM.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R4aiM.jpg" alt="enter image description here"></a></p>