How to use the react-async.useAsync function in react-async

const UseAsync = () => {
  const state = useAsync({ promiseFn: loadFirstName, userId: 1 })
  return (
    <>
      Loading...
      {error => `Something went wrong: ${error.message}`}
      
        {data => (
          <div>
            <strong>Loaded some data:</strong>
            <pre>{JSON.stringify(data, null, 2)}</pre>
          </div>
        )}
      
    
  )
}

export function useFetchProjectReadMe({ full_name, branch }) {
  return useAsync({
    promiseFn: fetchProjectReadMe,
    watch: full_name,
    full_name,
    branch
  })
}

const ProfileBox = ({username, activeProjects}) => {
  const {data, error, isLoading} = useAsync(loadUser, {username});
  const user = isLoading
    ? 'Loading...'
    : error
      ? 'User not found'
      : data.userName;
  const avatarUrl =
    isLoading || error ? '/static/img/giraffetools_logo.png' : data.avatar_url;
  const loggedIn = isLoading || error ? false : data.loggedIn;
  return (
    <div>
      <div style="{styles.sticky}">
        <div style="{styles.box}">
          <img style="{styles.profilePic}" src="{avatarUrl}">
          <h3 style="{styles.username}">{user}</h3>
          </div></div></div>

const AccountsListingPage: React.FunctionComponent = () => {
  const { data: accounts, error, isPending } = useAsync(getDeveloperAccounts)
  const { t } = useTranslation('audienceAccountsListing')
  useDocumentTitle(t('title_page'))

  return (
    <>
      
        
          
            
              
            
          
          
            <button>}</button>

const Async = props => {
  const { data, error, isPending } = useAsync(props)
  if (isPending) return "loading"
  if (error) return error
  if (data) return data
  return null
}

const AccountsIndexPage: React.FunctionComponent = () => {
  const { data: accounts, error, isPending } = useAsync(getDeveloperAccounts)
  const { t } = useTranslation('accountsIndex')
  useDocumentTitle(t('title_page'))

  return (
    <>

export function DirectoryView(props: Props) {
	let [typedQuery, setTypedQuery] = React.useState('')
	let searchQuery = useDebounce(typedQuery, 500)

	let {data, error, isLoading}: ReactAsyncResult = useAsync(
		searchDirectory,
		{query: searchQuery, watch: searchQuery},
	)

	let results = data ? data.results : []

	let renderRow = ({item}: {item: DirectoryItem}) => (
		 {
				props.navigation.navigate('DirectoryDetailView', {contact: item})
			}}
		/>
	)

	return (

const ApplicationsIndexPage: React.FunctionComponent = () => {
  const { authToken } = useAuth()
  const { t } = useTranslation('applicationsIndex')
  useDocumentTitle(t('page_title'))
  const { data: applications, isPending, error } = useAsync(getApplications, { authToken })

  return (
    <>

function AuthProvider(props) {
  const { client } = props;

  const [firstAttemptFinished, setFirstAttemptFinished] = React.useState(false);
  const {
    data = { user: null, listItems: [] },
    error,
    isRejected,
    isPending,
    isSettled,
    reload,
  } = useAsync({
    promiseFn: bootstrapAppData,
    client,
  });

  React.useLayoutEffect(() => {
    if (isSettled) {
      setFirstAttemptFinished(true);
    }
  }, [isSettled]);

  if (!firstAttemptFinished) {
    if (isPending) {
      return ;
    }
    if (isRejected) {
      return (

export function useFetchProjectDetails({ full_name }) {
  return useAsync({
    promiseFn: fetchProjectDetails,
    watch: full_name,
    full_name
  })
}