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.02k stars 194 forks source link

wdyr not work in next13 (repo provided) #272

Open 15077693d opened 1 year ago

15077693d commented 1 year ago

Repo for details: https://github.com/15077693d/Next-js-Boilerplate-adding-why-did-you-render/commit/19ea9f00c5d03c64054bcc24c56720dd6debbda5 I followed implementation from vercel/next.js/tree/canary/examples/with-why-did-you-render

Result(No log in console):

https://github.com/welldone-software/why-did-you-render/assets/51513183/25b5ecf4-1570-4b23-ab2b-58754d0acaff

jens-duttke commented 1 year ago

There are two things which need to get changed in your code:

  1. As you expect a logging for changed values, if you click on the button in the Header, you need to set the logOnDifferentValues option of whyDidYouRender to true.

  2. There seems to be a bug in https://github.com/welldone-software/why-did-you-render/blob/0f364e8451f5283e4d59054c96a9e2788f497045/src/shouldTrack.js#L39-L47 But there is a workaround for it, by setting include to [/./].

So to fix that both, your scripts/wdyr.ts should contain:

whyDidYouRender(React, {
  trackAllPureComponents: true,
  logOnDifferentValues: true,
  include: [/./],
});
scamden commented 9 months ago

thanks for the workaround! would be great t fix this for real as it was very confusing