Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tracking custom hooks issue #289

Open
c-betton opened this issue Jan 24, 2024 · 3 comments
Open

Tracking custom hooks issue #289

c-betton opened this issue Jan 24, 2024 · 3 comments

Comments

@c-betton
Copy link

c-betton commented Jan 24, 2024

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:
image

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:
image

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
Copy link

JustFly1984 commented Jan 24, 2024

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
Copy link
Author

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
Copy link

vectorkt commented Sep 23, 2024

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants