If I want to call API after the first rendering of ponent, I know we have useEffect hook to call the API method. (I am talking about functional ponents only. No class ponent).

Is there any way, I can call the API before my ponent renders the first time.

The reason for this question is, If some UI part is dependent on API, I do not want to show any inplete information to the user on the first render also, which will be changed once I get the data from API. This seems to be a bad experience with UI.

Edit: I got a couple of advice to use useLayoutEffect or any consumable flag to check if it is rendered or not. I have checked useLayoutEffect does not work, and by using the consumable flag, we are increasing the plexity only.

Do we have any better way for this?

If I want to call API after the first rendering of ponent, I know we have useEffect hook to call the API method. (I am talking about functional ponents only. No class ponent).

Is there any way, I can call the API before my ponent renders the first time.

The reason for this question is, If some UI part is dependent on API, I do not want to show any inplete information to the user on the first render also, which will be changed once I get the data from API. This seems to be a bad experience with UI.

Edit: I got a couple of advice to use useLayoutEffect or any consumable flag to check if it is rendered or not. I have checked useLayoutEffect does not work, and by using the consumable flag, we are increasing the plexity only.

Do we have any better way for this?

• javascript
• reactjs
• react-hooks
• react-functional-ponent
• react-lifecycle

• Since before and after render are milliseconds apart then how do you think before render will make a difference to after render? In both cases you have to render something (like loading). – HMR Commented Apr 20, 2020 at 12:56

5 Answers 5

I think useLayoutEffect can be used for something like this, by passing in an empty array as second argument. useLayoutEffect(() => {...}, []);

Updates scheduled inside useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.

Although you can always fetch the data in the parent ponent and pass it as props. Or - if you don't mind it being an experimental feature for now - React Suspense is trying to solve this exact problem.

You can have a spinner or loading ponent be rendered first conditionally (isLoading for example):

if(isLoading) return <Spinner />

and have the api call set (isLoading) to false on status 200 for example.

There are no correct ways to make API call before ponent rendered from the same ponent.

You may preferred make API call in parent ponent and render presentation ponent when and only when have consumable data.

Another workaround for such case is keep consumable flag inside ponent, make request inside useEffect, render nothing or some kind loader and render something only when request pleted with success.

on calling api it is not responding exact on its first render but giving exact response when it's being hit second time

Just came across something, which may help someone in future. So we can use some library but the specific one I would mention here is React Query

React query does exactly what we are trying to achieve, the hooks like useQuery fetch data as soon as rendering starts so you don’t have to wait until react loads the entire ponent as follows

// with react query
const { status, data, error, isFetching } = useQuery(
  ['data'],
  async () => {
    const data = await (
      await fetch(`${API_BASE_URL}/data`)
    ).json()
    return data
  }
)


// without react query
useEffect(() => {
  try {
    setLoading(true)(async () => {
      const data = await (await fetch(`${API_BASE_URL}/data`)).json();
      setData(data);
    })();
  } catch (error) {
    setError(error);
  } finally {
    setLoading(false);
  }
}, []);

Here is the article link if you want to read