title: Warning: Can't perform a React state update on an unmounted component
body: <p>i am trying to send the state to another component using a Link, but it always gave me this error </p>
  
  <blockquote>
    <p>Warning: Can't perform a React state update on an unmounted component.</p>
  </blockquote>
  
  <p>I would like to know what are the best solution to avoid this kind of conflict.</p>
  
  <p>and thanks on advance</p>
  
  <pre><code>class Home extends Component {
  constructor() {
      super()
      this.state = {
          data: {},
          name: ""
      }
      this.createRoomHandler = this.createRoomHandler.bind(this)
  }
   createRoomHandler() {
  
      var settings = {
          "async": true,
          "crossDomain": true,
          "url": "https://api.eyeson.team/rooms",
          "method": "POST",
          "headers": {
              "Authorization": ""
  
          },
          "data": {
              "user[name]": this.state.name
          }
      }
  
  
  
      $.ajax(settings).done((response) =&gt; {
  
          this.setState({ data: response });
          console.log("ashraf", response)
      })
  
  
  }
    createNamehandler = (e) =&gt; {
      this.setState({ name: e.target.value })
  
  }
    componentWillUnmount = () =&gt; {
      this.createRoomHandler()
  }
  render() {
  
      return (
          &lt;div className="create-room-container"&gt;
              &lt;input onChange={this.createNamehandler} /&gt;
              &lt;Link to={{ pathname: "CreateStream", query: 
              this.state.data }} &gt; &lt;button onClick= 
              {this.createRoomHandler}&gt;Create 
    Room&lt;/button&gt;&lt;/Link&gt;
          &lt;/div&gt;
      )
    }
  
  }
  </code></pre>
  
  <p>export default Home</p>