No logs

[welldone-software]

No logs

[piotrkochan]

I've added some myComp.whyDidYouRender = true but still there is no logs

[vzaidman]

copied from the readme:

https://github.com/welldone-software/why-did-you-render#usage

mark all the components you want to be notified about their re-renders with whyDidYouRender like so:

class BigListPureComponent extends React.PureComponent {
  static whyDidYouRender = true
  render(){
    return (
      //some heavy render you want to ensure doesn't happen if its not neceserry
    )
  }
}

Or like this:

const BigListPureComponent = props => (
  <div>
    //some heavy component you want to ensure doesn't happen if its not neceserry
  </div>
)
BigListPureComponent.whyDidYouRender = true

Or track all the components that are matched by their name in the include array like this:

if (process.env.NODE_ENV !== 'production') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, { include: [/^pure/], exclude: [/^Connect/] });
}

You probably don't want the regex way since it will find many many re-renders.

Better focus on your bigger bottleneck components using the first way.

[StuartFlutter]

I just tried to use whyDidYouRender, have installed it correctly and followed instructions exactly, and still see no logged output of any kind

[EstebanBP]

My bad, I should have read better.
Thanks!

[vzaidman]

how do you use "myComp"? (by the way it sohuld probably be capital letter: "MyComp"

[rbrewington]

I also can't seem to see any logs. Is this some issue with functional components?

Edit: After a bit of further research, it seems to work on some components. Is it not possible to get logs on components that are conditionally rendered?

[vzaidman]

try the example here:
#14 (comment)

there are only logs if renders can be prevented.

[vzaidman]

  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });

would track all pure components. does it answer your question?
what do you mean by "conditionally rendered"?

[rbrewington]

I made an issue specific to my use case: #94

By conditionally rendered, I mean it's only rendered under certain conditions. Suppose you have a boolean isLoading.
And your component returns either a loading indicator or the content depending on if isLoading is true. The content is conditionally rendered in this case.

[dimashpt]

React native has different development flag than react for web
Just change your condition from
if(process.env.NODE_ENV !== 'production')
to:
if (__DEV__)

And viola