No logs or anything about WDYR

[JamesDev21]

I follewed the setup instructions but I see no logs or anything. I am using CRA v5.0.1 and the react version is 18.2. WDYR is v7.0.1. Is this a compatibility issues? thanks

index.js:

import './whyDidYouRender'

import React from 'react'
import ReactDOM from 'react-dom/client'

// GLOBAL STYLES
import 'styles/global.module.scss'

// CONTEXT
import { AppProvider } from 'context/AppContext'

import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
  <AppProvider>
    <App />
  </AppProvider>
)

whyDidYouRender.js:

import React from 'react';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render')
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  })
}

[GoRRRRchik]

the same issue
react-native 0.72.4

[sebastien-f]

for what that's worth, I have the same setup as you and getting logs. The only difference is that I migrated to :

import React from 'react';

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

Before that, I had it deactivated for a while and refactored quite a lot of components and screens. When reactivated, I was having no logs, then tried that.

I'm now getting a log once in a while, not sure if my code improved THAT much everything or if something changed in React/RN that makes WDYR triggers less.

[sergeylaptev]

I’ve described the solution for react-native projects in this pull request #288

[avisek123]

Hi @sergeylaptev I've followed the steps but still getting no logs .

babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],

  env: {
    development: {
      plugins: [['@babel/plugin-transform-react-jsx', {runtime: 'classic'}]],
    },
  },
};

wdyr.ts

/// <reference types="@welldone-software/why-did-you-render" />
import React from 'react';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
    logOnDifferentValues: true,
    collapseGroups: true,
    trackHooks: true,
  });
}

App.tsx

import {Button, Text, View} from 'react-native';
import React, {useState} from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>{count}</Text>
      <ChildComponent />

      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

const ChildComponent = React.memo(({data}: any) => {
  return (
    <View>
      <Text>{data}</Text>
    </View>
  );
});
ChildComponent.whyDidYouRender = true;

export default App;

index.js

import './wdyr';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

[SudoPlz]

try collapseGroups: false in settings

[avisek123]

@SudoPlz I have tried this also but not working .
Please help here . @sergeylaptev @SudoPlz

[SudoPlz]

@avisek123 I'm not sure why it's not working, I'm also just experimenting myself. I had luck with both that flag, and include: [/^.*YourComponentName$/],

[pooriamo]

I'm using react native 0.73.4 and my babel.config.js is is using module:@react-native/babel-preset.

And I don't have logs.

@sergeylaptev

[endurance-chorus]

I set up WDYR today in our NX monorepo with a React/Vite project. The React / Typescript configuration of my project is simple.

I faced the "no logs" issue, and landed on this configuration and it is printing.

The import * as React from 'react' failed, so try using import React from 'react' syntax.

/// <reference types="@welldone-software/why-did-you-render" /> // for Typescript
import React from 'react'; // This import worked.
import * as React from 'react'; // This import failed for WDYR

if (
  import.meta.env.DEV &&
  import.meta.env.VITE_ENABLE_WHY_DID_YOU_RENDER === 'true' // for local .env configuration for my team.
) {
  const { default: wdyr } = await import(
    '@welldone-software/why-did-you-render'
  );

  wdyr(React, {
    include: [/.*/],
    exclude: [/^BrowserRouter/, /^Link/, /^Route/],
    collapseGroups: false,
    trackHooks: true,
    trackAllPureComponents: true,
    logOnDifferentValues: true,
  });
}

Good luck - hope this works for y'all.

[EvgeneOskin]

Thanks, @endurance-chorus!

The following wdyr.js did the trick for me on React Native 0.80:

import React from 'react';
import wdyr from '@welldone-software/why-did-you-render';

wdyr(React, {
  include: [/.*/],
  exclude: [/^BrowserRouter/, /^Link/, /^Route/],
  collapseGroups: false,
  trackHooks: true,
  trackAllPureComponents: true,
  logOnDifferentValues: true,
});