This describes how to refresh the data loaded on a react page. You can refresh all or just some of the data. Here are some examples of when you might want to do that. 

Let's say we have a list of items that we render on a page, along with the ability to delete the item. This might look like:

```md static
def index
  render page: "items", props: Item.all
end 
```

```js static
function Items({ items: initialItems }) {
  const [items, setItems] = useState(initialItems)
 
  const handleDelete = async (id) => {
    // first delete the item
    const result = await deleteItem(id);

    // then remove it from the state
    setItems(items.filter((item) => item.id !== id))
  }

  return items.map((item) => <Item onDelete={handleDelete} />)
}

```

This is a simple example, but it shows a little bit of the manual state management you get into when implementing a feature like this, and there's a lot of room for error. In a classic rails app, we'd delete the item, and reload the index page, and we know our data would be correct because it comes from the server. 

So let's use that approach using this new refresh function:

```js static
function Items({ items: initialItems }) {
  const navigate = useNavigate();
 
  const handleDelete = async (id) => {
    // first delete the item
    const result = await deleteItem(id);

    // get the latest data
    navigate.refresh()
  }

  return items.map((item) => <Item onDelete={handleDelete} />)
}

```

In this example, it doesn't look a lot different, but as examples get more complex, eliminating the state management can simplify things a lot. 



You can also refresh just part of the data:

```js static
navigate.refresh({ only: ["items"]})
```