React Handbook

​x
 
function App () {
  const [posts, setPosts] = React.useState(null)
  
  const fetchData = React.useCallback(async () => {
    const data = await fetch('https://jsonplaceholder.typicode.com/posts')
    const response = await data.json()
    setPosts(response.slice(0, 10))
  }, [])
  
  React.useEffect(() => {
    fetchData()
  }, [fetchData])
  
  if (!posts) return <div>Loading...</div>
  
  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  )
}

If you don't want to define the fetching function inside the useEffect(), you can define it in the body of the component. Don't forget to wrap it in a useCallback() though - if you didn't, you would have caused an infinite loop. This function will never re-create unless you provide dependencies in the useCallback() array.

sunt aut facere repellat provident occaecati excepturi optio reprehenderit
qui est esse
ea molestias quasi exercitationem repellat qui ipsa sit aut
eum et est occaecati
nesciunt quas odio
dolorem eum magni eos aperiam quia
magnam facilis autem
dolorem dolore est ipsam
nesciunt iure omnis dolorem tempora et accusantium
optio molestias id quia eum