Open JamesDev21 opened 1 year ago
the same issue react-native 0.72.4
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.
I’ve described the solution for react-native projects in this pull request https://github.com/welldone-software/why-did-you-render/pull/288
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);
try collapseGroups: false
in settings
@SudoPlz I have tried this also but not working . Please help here . @sergeylaptev @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$/],
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
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:
whyDidYouRender.js: