title: How do I set the result of an API call as the default value for a Recoil atom?
body: <p>I'm trying to set the default value for an atom in RecoilJS as the value of an asynchronous API call. I'm doing this so that when a certain React component renders it will have all of the current sets in the database without having to call useEffect(). Here's my code...</p>
  <pre><code>const sets = (async () =&gt; await setService.getAll())()
  
  export const setsState = atom({
    key: 'sets',
    default: sets
  })
  </code></pre>
  <p>Here's the error I'm getting...</p>
  <pre><code>index.js:1 Warning: Cannot update a component (`Batcher`) while rendering a different component (`App`). To locate the bad setState() call inside `App`, follow the stack trace as described in https://facebook.com/setstate-in-render
      in App (at src/index.js:10)
      in Router (created by BrowserRouter)
      in BrowserRouter (at src/index.js:9)
      in RecoilRoot (at src/index.js:8)
  </code></pre>
  <p>Is there something fundamentally wrong in the approach that I am taking? Should I be accomplishing this another way? Am I doing something wrong, or is this just a broken feature of Recoil?</p>