Safe Async in React

aaction.tsx

const action = {
  type: "FETCH_RESOURCE",
};

const asyncAction = () => createAsyncAction(action, fetchResource);

const isPending = makeIsPendingSelector(action.type, '', true);

const isFailed = makeErrorSelector(action.type)

function AsyncComponent() {
  const dispatch = useDispatch()
  const data = useSelector(selectData)
  const loading = useSelector(isPending)
  const error = useSelector(isFailed)

  useEffect(() => dispatch(asyncAction()))

  if (error) throw error;
  if (loading) return <Loading />;
  if (data) return <Display data={data} />;
  throw new Error("No data or error received");
}

apollo.tsx

function AsyncComponent() {
  const { loading, data, error } = useQuery(RESOURCE_QUERY)

  if (error) throw error
  if (loading) return <Loading />
  if (data) return <Display data={data} />
  throw new Error("No data or error received")
}

iife.tsx

function AsyncComponent() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState();
  const [data, setData] = useState();

  useEffect(() =>
    (async () => {
      if (loading) {
        try {
          const response = await fetchResource();
          setLoading(false);
          setData(response.data);
        } catch (err) {
          setLoading(false);
          setError(error);
        }
      }
    })()
  );

  if (error) throw error;
  if (loading) return <Loading />;
  if (data) return <Display data={data} />;
  throw new Error("No data or error received");
}

naive.tsx

function AsyncComponent() {
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState()
  const [data, setData] = useState()

  useEffect(async () => {
    if (loading) {
      try {
        const response = await asyncAction()
        setLoading(false)
        setData(response.data)
      } catch (err) {
        setLoading(false)
        setError(error)
      }
    }
  })

  if (error) throw error
  if (loading) return <Loading />
  if (data) return <Display data={data} />
  throw new Error("No data or error received")
}

promise.tsx

function AsyncComponent() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState();
  const [data, setData] = useState();

  useEffect(() => {
    if (loading) {
      const response = fetchResource
        .then(() => {
          setLoading(false);
          setData(response.data);
        })
        .catch((err) => {
          setLoading(false);
          setError(error);
        });
    }
  });

  if (error) throw error;
  if (loading) return <Loading />;
  if (data) return <Display data={data} />;
  throw new Error("No data or error received");
}