javascript - How to pass a promise to a component while using it in useEffect (React)?

Question

I have a react component which fetches users from a server:

export function UsersTable() {
  const [users, setUsers] = useState([])
  const [userFilters, setUserFilters] = useState(...)

  useEffect(() => {
    getUsers(userFilters).then(usersData => setUsers(usersData.data))
  }, [userFilters])

  return (
    <InnerComponent data={getUsers(userFilters)} />
    ...
  )
}

As you can see I render a InnerComponent that receives data (a promise of users) as a prop.
This obviously calls the function getUsers which triggers another network request.

My question is how can I call getUsers only once (must be called in the useEffect hook like i did since i rely on dependecy array), and use the promise returned as the data prop in InnerComponent?

Edit: InnerComponent expects a promise to subscribe to so it can display a different view depending on the promise state (pending, fullfilled, rejected)

Edit: Implementation of InnerComponent (Pretty much a component that displays an error or loading views based on the promise state)

type LoadableProps<T> = {
  data: Promise<T>,
  loading: JSX.Element,
  error: JSX.Element,
  children?: JSX.Element
}

enum LoadableState {
  LOADING,
  DATA_FETCHED,
  ERROR
}

export function InnerComponent<T>(props: LoadableProps<T>) {
  const [loadableState, setLoadableState] = useState(LoadableState.LOADING)

  useEffect(() => {
    props.data.then(result => {
     setLoadableState(LoadableState.DATA_FETCHED)
    }, error => {
      setLoadableState(LoadableState.ERROR)
    }).catch(error => {
      setLoadableState(LoadableState.ERROR)
    })
  }, [])

  return (
    <>
      {loadableState === LoadableState.DATA_FETCHED ? props.children : null}
      {loadableState === LoadableState.LOADING ? props.loading : null}
      {loadableState === LoadableState.ERROR ? props.error : null}
    </>
  )
}

question from:https://stackoverflow.com/questions/65859857/how-to-pass-a-promise-to-a-component-while-using-it-in-useeffect-react

Answer 1

you could pass some other props for update promise status.Check my updated answer

Updated with promise state activity

export function UsersTable() {
  const [users, setUsers] = useState([]);
  const [promiseState, setPromiseState] = useState(null);
  const [userFilters, setUserFilters] = useState(...)

  useEffect(() => {
    setPromiseState('pending')
    getUsers(userFilters).then((usersData) =>{ 
      setPromiseState('fullfilled')
      setUsers(usersData.data);
    }).catch((err)=>{setPromiseState('rejected')})
  }, [userFilters])

  return (
    <InnerComponent data={users} promiseState={promiseState} />
    ...
  )
}