title: React Load Data From DB & Store in State Only Once
body: <p>So here's my situation. I have a component that loads some data from the database, like so:</p>
  
  <pre><code>const task= fetch(`http://example.com`)
          .then(result =&gt; result.json())
          .then(result =&gt; {
              this.setState({
                  items: result
              })
          });
  
          addTask(task);
  </code></pre>
  
  <p>Now, if I add this code to the <code>componentWillMount</code> method, it does work however, every time I load the component, this method will fire and I don't want it calling the database every time. I want it called once on first load and then stored in the state and never called again.</p>
  
  <p>And because I am rendering a list of items, I have to manually set this <code>items</code> variable in the constructor to avoid <code>null</code> errors:</p>
  
  <pre><code>constructor() {
      super();
      this.state = {
          items: [],
      }
  }
  </code></pre>
  
  <p>My question is, how can I load this data only once and then set it to the <code>items</code> state variable. I have tried adding all this code to the reducer of the component (I am using <code>redux</code>), but it doesn't work.</p>