--- title: No Suspense nav: 3.6 --- > The content of this page will be easier to follow if you have taken a look at the [basics/async](../basics/async.mdx) part of the docs. Sometimes we need to wrap our components in suspense to use asynchronous atoms. But sometimes we're not allowed to wrap our components in Suspense, So we're going to do some hacks below and and make our async atoms synchronous. ## Async `read` (Derived async atoms) Check this derived async atom: ```tsx const urlAtom = atom('https://json.host.com') const fetchUrlAtom = atom(async (get) => { const response = await fetch(get(urlAtom)) return await response.json() }) ``` It needs Suspense because the `read` function returns a promise(async function). We shouldn't return a promise if we don't need it to suspend, so we have to change the structure slightly. Here's the new code. ```tsx const fetchResultAtom = atom({ loading: true, error: null, data: null }) const runFetchAtom = atom( (get) => get(fetchResultAtom), (_get, set, url) => { const fetchData = async () => { set(fetchResultAtom, (prev) => ({ ...prev, loading: true })) try { const response = await fetch(url) const data = await response.json() set(fetchResultAtom, { loading: false, error: null, data }) } catch (error) { set(fetchResultAtom, { loading: false, error, data: null }) } } fetchData() } ) runFetchAtom.onMount = (runFetch) => { runFetch('https://json.host.com') } const Component = () => { const [result] = useAtom(runFetchAtom) console.log(result) // { loading: ..., error: ..., data: ... } return