useRef to memoize react custom hook

Question

Can I use useRef() for the purpose to memoize an object from a custom hook? Because without that when if I use that returned object from the hook as a useEffect dependency I get an infinity loop of requests.

Example of my code that I use now:

  const apiHook = useRef({})
  apiHook.current = useRequest(
    'http://someapi',
    {
      onSuccess: (data) => {
        console.log(data)
      }
    }
  )
  useEffect(() => {
    apiHook.current.run()
  }, [])

i think useCallback is what you need fr.reactjs.org/docs/hooks-reference.html#usecallback — Aurelio LIMA FERREIRA
– Aurelio LIMA FERREIRA, Commented Aug 26, 2020 at 11:51
I used it but also got infinity loop of requests, maybe I used it the wrong way, could you please share an example? with my code — splincool
– splincool, Commented Aug 26, 2020 at 11:52
i need more of your code for that, you can try like this andrewstevens.dev/posts/useApi-react-hook — Aurelio LIMA FERREIRA
– Aurelio LIMA FERREIRA, Commented Aug 26, 2020 at 12:04
I use the useRequest hook from ahook package ahooks.js.org/hooks/async — splincool
– splincool, Commented Aug 26, 2020 at 12:07

AKX · Accepted Answer · 2020-08-26 12:56:34Z

2

You probably want something like

function Component() {
  const apiResp = useRequest('http://someapi');
  useEffect(() => {
    console.log(`New data: ${apiResp.data}`);
  }, [apiResp.data]);
}

i.e. only use the data of the useRequest as a dependency.

answered Aug 26, 2020 at 12:56

AKX

171k16 gold badges147 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aurelio LIMA FERREIRA · Accepted Answer · 2020-08-26 13:21:32Z

1

First params for useRequest is a function who return a promise : () => axios(url)

Example with axios : Here

Example with custom useApi : Here

edited Aug 26, 2020 at 13:21

answered Aug 26, 2020 at 12:51

Aurelio LIMA FERREIRA

975 bronze badges

3 Comments

splincool Over a year ago

This is a good example, axios is more useful to work with requests, thank you

Aurelio LIMA FERREIRA Over a year ago

the two example use useRequest that allow to handle promise

Aurelio LIMA FERREIRA Over a year ago

my bad i dont know that useRequest can be use just like useRequest(url) ^^

Collectives™ on Stack Overflow

useRef to memoize react custom hook

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related