Could I turn off the tracking component from a specific library?

[zcmgyu]

Could I turn off the tracking component from a specific library?

After upgrade to Ant Design v4, the Table component's specification has changed as well. So I need to turn whyDidYouRender warning off for this component.

I know that we could turn off whyDidYouRender by using whyDidYouRender = false on a specific component. How could we do the same for a specific component from the library like Ant Design?

I don't want to set exclude in the configuration of whyDidYouRender, because of the re-rendered component name is quite common (for instance, Body, undefined)

Thank you in advance.

[vzaidman]

Hey!
Do you track all pure components right now and that's the reason you see all these warnings?

[zcmgyu]

@vzaidman Yeah, this my current configuration.

    trackAllPureComponents: true,
    trackHooks: true,

[vzaidman]

I can't think of any better way than something like (i didn't try it):

if (process.env.NODE_ENV === 'development') {
  const antComponents = require('antd');
  Object.values(antComponents).forEach(c => c.whyDidYouRender = false);

  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

[zcmgyu]

Hey @vzaidman, thank for your suggestion.

I've added a condition before set whyDidYouRender to false.

  const antComponents = require('antd');
  Object.values(antComponents).forEach(c => {
    if (typeof c === 'function') {
      c.whyDidYouRender = false
    }
  });

But it still doesn't work. I think it still couldn't turn off warning of the component inside Table component.

[vzaidman]

open the arrow from the log, right click the "body" component and see where it comes from.

[zcmgyu]

@vzaidman
It came from rc-table/es/Body/index.js - a dependency used in Table component of Ant Design.

[vzaidman]

got to import it and set whyDidYouRender = false on it.

I will think of a better way meanwhile.

[zcmgyu]

@vzaidman I don't know why but it still doesn't work although I've imported directly and set whyDidYouRender = false for each component already.

https://codesandbox.io/s/turn-off-specific-component-in-whydidyourender-wdm64?file=/wdyr.js

[vzaidman]

damn, sadly MemoTableContent is not exported. (that one that is logged as "undefined")

[vzaidman]

i need to research it a little more.

[0xdevalias]

Would it be possible to use the exclude option with a RegEx to workaround it in the meantime?

You can include or exclude tracking of components by their displayName using the include and exclude options.

For example, the following code is used to track all redundant re-renders that are caused by older React-Redux:

whyDidYouRender(React, { include: [/^ConnectFunction/] });

Notice: exclude takes priority over both include and manually set whyDidYouRender =

[vzaidman]

Yes it would, but just in case the library exports components with unique enough names.
In general I see that the new JSX transformation can solve this issue in the future. I hope I'll have time to get to it.