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.32k stars 199 forks source link

react-refresh-webpack-plugin not updating component when wrapped with React.memo. #292

Open kyukk opened 8 months ago

kyukk commented 8 months ago

When wrapping component in React.memo its stop to updating, when something changed. Its happens only if component being exported and wrapped in memo.

wdyr.js

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,
  });
}

index.tsx

import './wdyr'; 
import React from 'react';
import { App } from './App';

const root = ReactDOM.createRoot(document.getElementById('app')!);
root.render(
    <App/>
);

App.tsx

export const App = memo(function App() {

    return(
     <div> some text </div>
    );
})

If I remove wdyr or remove React.memo or will import through React.lazy it work fine.

If change it like this it work to:

App.tsx

export function AppWrapper() {

    return(
        <App />
    );
}

const App = memo(function App() {

    return(
        <div> some  text</div>
    );
})