title: reactjs how come my render keeps getting invoked a lot?
body: <p>Hello I have have the following component</p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import RecipeItems from './RecipeItems';
  
  class RecipeContainer extends Component {
      constructor() {
          super();
          this.state = {
  
          };
      }
      loadRecipe()
      {
          fetch("http://localhost:64755/Api/recipe/" + this.props.recipeId)
          .then(result =&gt; {
              return result.json();
          })
          .then(data =&gt; {
  
              //const foo = data;
              this.setState({ Recipe: data })
          }
          )            
          .catch(e =&gt; {
              console.log(e)
              return e;
          });
      }
      render() {
          this.loadRecipe()
  
              console.log('in recipecontainer');
              return(&lt;div&gt;&lt;/div&gt;)
      }
  }
  
  RecipeContainer.propTypes = {
      recipeId: PropTypes.number
  };
  
  export default RecipeContainer;
  </code></pre>
  
  <p>I originally put a console.log() for debugging but then I noticed this method is being call in what it seems is a loop. It doesn't stop. What is wrong here? I know when I remove this.setState({ Recipe: data }) then the loop stops.</p>