title: How can I use React Hooks to refresh a table when a row is deleted or added?
body: <p>I have a react-table component that displays some game data.</p>
  
  <p>The component uses hooks to set state like this:</p>
  
  <pre><code>const [data, setData] = React.useState([]);
  React.useEffect(() =&gt; {
      gameData(false).then(res =&gt; {
          setData(res.data);
      });
  }, []);
  </code></pre>
  
  <p>Inside my table, I have a button that adds or removes a row via a Put request to an api.</p>
  
  <p>I want it to remove the row without doing a full/visable page refresh.</p>
  
  <p>Here is the bit of code that does the axios put request.</p>
  
  <p>You can see I'm trying to use 'setData' again to 'refresh' the data. </p>
  
  <p>But that doesn't work. Now it does remove the row, but I can only see that after I hit f5 or hit the browser refresh button.</p>
  
  <pre><code>const updateGame = async (game, action) =&gt; {
      await new Promise(resolve =&gt; setTimeout(resolve, 500));
  
      game.isApproved = action;
      axios({
          method: "PUT",
          url: "api/games/" + game.id,
          data: JSON.stringify(game),
          headers: { 'Content-Type': 'application/json; charset=utf-8' }
      });
      // trying to refresh table after the axios Put request
      setData(data);
  };
  </code></pre>
  
  <p>Is there a way to refresh state dynamically without having to hit refresh?</p>
  
  <p>Thanks!</p>