123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
---title: atomWithRefreshnav: 8.06keywords: creators,refresh---
> `atomWithRefresh` creates a derived atom that can be force-refreshed, by using> the update function.This is helpful when you need to refresh asynchronous data after performing aside effect.
It can also be used to implement "pull to refresh" functionality.
```tsimport { atom, Getter } from 'jotai'
export function atomWithRefresh<T>(fn: (get: Getter) => T) {  const refreshCounter = atom(0)  return atom(    (get) => {      get(refreshCounter)      return fn(get)    },    (_, set) => set(refreshCounter, (i) => i + 1),  )}```
Here's how you'd use it to implement an refresh-able source of data:
```jsimport { atomWithRefresh } from 'XXX'
const postsAtom = atomWithRefresh((get) =>  fetch('https://jsonplaceholder.typicode.com/posts').then((r) => r.json()),)```
In a component:
```jsxconst PostsList = () => {  const [posts, refreshPosts] = useAtom(postsAtom)  return (    <div>      <ul>        {posts.map((post) => (          <li key={post.id}>{post.title}</li>        ))}      </ul>      {/* Clicking this button will re-fetch the posts */}      <button type="button" onClick={refreshPosts}>        Refresh posts      </button>    </div>  )}```