title: useState hook - state gets lost i.e. resets to initial value
body: <p>I am trying to initialize the state during the mounting cycle, and then do something with it on each update.  </p>
  
  <p>However, the state gets reset somehow? I don't understand why.</p>
  
  <pre class="lang-js prettyprint-override"><code>const [journalItems, setJournalItems] = useState([]);
  
  useEffect(() =&gt; {
      fetch(`http://localhost:4000/journals/${props.match.params.key}/items`)
          .then(res =&gt; res.json())
          .then(data =&gt; {
              setJournalItems(data)    // Sets the state when the AJAX completes
              })
          .catch(err =&gt; err);
  
      table.current = new Tabulator(refTable.current, {
          rowClick: function (e, row) {
              console.log("tabulator journalitems", journalItems) //  State is lost returns []
              handleTableRowClick(row._row.data.id)
          },
          columns: [
              { title: "Компанија", field: "companyName" },
              { title: "Документ", field: "documentKey" },
          ],
      });
  }, []);
  
  useEffect(() =&gt; {
      console.log("useEffect journalItems", journalItems)    // Works fine
      table.current.replaceData(journalItems)                // Uses the new state
  }, [journalItems]);
  
  function handleTableRowClick(journalItemId) {
      console.log("handletablerowclick journalitems", journalItems) // State is lost, resets to []
  }
  </code></pre>
  
  <p>Results form the console logs...</p>
  
  <pre><code>useEffect journalItems []
  useEffect journalItems (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
  
  tabulator journalitems []
  handleTableRowClick journalitems []
  </code></pre>