React sucks?

App.js

import React, { useState, useEffect } from 'react'
  
  const App = () => {
   	const [docs, setDocs] = useState(null)
    const [isFetchingDocs, setIsFetchingDocs] = useState(false)
    const userId = "user123"

    const getDocs = (userId) => {
      // some async functoin
      console.log("function getDocs ran")
    }

    useEffect(() => {
      let isMounted = true
      if (!isFetchingDocs && userId) {
        (
          async () => {
            try {
              setIsFetchingDocs(true)
              const response = await getDocs(userId)

              // prevent memory leaks, only set docs if isMounted
              if (isMounted) {
                setDocs(docs => {
                  if (!docs) {
                    return response
                  } else return docs
                })

                setIsFetchingDocs(false)
              }
            } catch (err) {
              setIsFetchingDocs(false)
              console.log(err)
            }
          }
        )()
      }

      return () => {
        isMounted = false
      }
    }, [
      userId,
      getDocs,
      setIsFetchingDocs,
      setDocs
    ])
  
    return (
      <ul>
        {
          isFetchingDocs ? <li>...loading</li>
          :
          docs.map(doc => {
            return <li>{doc.name}</li>
          }
        }
      </ul>
    )
  
  }
  
  export default App

Solution gist here