search

welldone-software / why-did-you-render

why-did-you-render by Welldone Software monkey patches React to notify you about potentially avoidable re-renders. (Works with React Native as well.)
https://www.npmjs.com/package/@welldone-software/why-did-you-render
MIT License
11.11k stars 196 forks source link

Tracking custom hooks issue #289

Open c-betton opened 7 months ago

c-betton commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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?