Question: I have a react-table component that displays some game data.

The component uses hooks to set state like this:

```
const [data, setData] = React.useState([]);
React.useEffect(() => {
    gameData(false).then(res => {
        setData(res.data);
    });
}, []);

```

Inside my table, I have a button that adds or removes a row via a Put request to an api.

I want it to remove the row without doing a full/visable page refresh.

Here is the bit of code that does the axios put request.

You can see I'm trying to use 'setData' again to 'refresh' the data. 

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.

```
const updateGame = async (game, action) => {
    await new Promise(resolve => 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);
};

```

Is there a way to refresh state dynamically without having to hit refresh?

Thanks!

Answer: 
You have to let the effect know when you want it to run. The empty bracket is basically like using onMount so by adding the data to it will refresh when data is changed.

```
const [data, setData] = React.useState([]);
React.useEffect(() => {
    gameData(false).then(res => {
        setData(res.data);
    });
}, [data]);

```
```
setData(data);

```

This just sets the data you already have because the `data` variable hasn't changed.

Did you mean to set the new data returned by your PUT request? If so you need to `await` the request, and then set the new state.

You probably want something like:

```
const newData = await axios({
    method: "PUT",
    url: "api/games/" + game.id,
    data: JSON.stringify(game),
    headers: { 'Content-Type': 'application/json; charset=utf-8' }
});
setData(newData);

```