Tracking custom hooks issue

[c-betton]

Hello all,

I'm starting using the 'why-did-you-render' library.
I would like to track my custom hooks but it seems not working on my side.

Here is my configuration (starting with only one custom hook to simplify) set in the 'wdyr.ts' file content:

And the custom hook I'm using
export const useUploadApk = (): UploadApk => {
...
const [callGetUrl, setCallGetUrl] = useState(false)
const [callUpload, setCallUpload] = useState(false)
...
}

This custom hook is using useState hook and is called from a form.
When running the App, I got the following trace:

I was expecting to see my custom hook name (useUploadApk) in the trace...
Do I miss something in trackExtraHooks syntax?
Thanks a lot in advance for any help.

[JustFly1984]

always wrap value into useMemo before passing it into ContextProvider, same with custom hooks return object, or better just inline your custom hook. Believe me, it is bad abstraction.

[c-betton]

always wrap value into useMemo before passing it into ContextProvider, same with custom hooks return object, or better just inline your custom hook. Believe me, it is bad abstraction.

Thanks a lot for your answer,
Could you please give me an example?

[vectorkt]

I am having the same issue with exactly the same setup.

@c-betton 's issue and mine has nothing to do with ContextProvider setup.

The Custom Hook simply doesn't register on wydr.

The trouble is the documentation only offers a trackExtraHooks example with a React Redux hook, not a Custom Hook.

import React from 'react';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  const ReactRedux = require('react-redux');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
    trackExtraHooks: [
      [ReactRedux, 'useSelector']
    ]
  });
}

Are Custom Hooks even supported? If yes, what is the syntax?