useEffect or useMemo for API functions?

Question

which is the best hook for dispatching API calls in a component. Usually I use useMemo for calling the API on the first render, and useEffect if I need extra side effects, is this correct? Becouse sometimes I get the following error:

'''index.js:1 Warning: Cannot update a component ( Inscriptions ) while rendering a different component ( PaySummary ). To locate the bad setState() call inside PaySummary , follow the stack trace as described in...''''

That happens when I route to a component and rapidly change to another one, it doesn't "affect" the general behaivour becouse if i go back to the previous component it renders as expected correctly. So how should I do it?

Answer 1

Calling an API is a side effect and you should be using useEffect , not useMemo

Per the React docs for useEffect :

Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects. Whether or not you're used to calling these operations “side effects” (or just “effects”), you've likely performed them in your components before.

Per the React docs for useMemo :

Remember that the function passed to useMemo runs during rendering. Don't do anything there that you wouldn't normally do while rendering. For example, side effects belong in useEffect, not useMemo.

Performing those side effects (and modifying state) during rendering or with useMemo is the reason you encounter the errors you mention.

Answer 2

basically I rather to use useEffect in componentDidMount manner, with no dependency like below

useEffect(() => {

  // Api call , or redux async action here...

}, [])

for calling api's at component mount state. most of the time i find my self using useMemo for memoising the data at functional Component render level, for preventing the variable re-creation and persist the created data between renders except the dependency changes.

but for the context of your question, there is a hook called useLayoutEffect which is primarily used for actions to happen before painting the DOM, but as i said basically most of the time in projects i find calling apis in a simple useEffect with no dependencies aka, the did mount of your component, in order to load the required data for component!

Answer 3

A bit late but, while everything mentioned above is completely true; the error

'''index.js:1 Warning: Cannot update a component (Inscriptions) while rendering a different component (PaySummary). To locate the bad setState() call inside PaySummary, follow the stack trace as described in...''''

Has to do with the fact that the API call is Asynchronous and when you rapidly change the pages, the set state call (for updating the data returned from the API call I assume) is still waiting to be called after the data is returned from the API. So, you have to always clean up your Async functions in useEffect to avoid this error.