[react] HMR not working with HOC

[marovargovcik]

Describe the bug

Description

There is a very odd behavior in my project with HMR not updating what the browser is displaying after editing a component.

• I have a page component About in src/About.tsx that is used as an element for react-router <Route> in src/App.tsx.
• This page component About is also wrapped with HOC withRandom from src/withRandom.tsx.
• A Component defined in the same src/About.tsx file is wrapped with HOC withCounter from src/withCounter.tsx and used as one of children of About component

This combination makes HMR not working as expected because any editing to About component is not updating what is being displayed by the browser.

Findings

Updating <h1>original text</h1> in About component does not update the text displayed in the browser.

const Component = memo(() => (
  <div style={{ border: '1px solid black', padding: '8px' }}>
    <b>This is component defined in about.tsx</b>
  </div>
));

const ComponentWithCounter = withCounter('You are finally awake.', Component);

const About = withRandom(
  'One does not simply reproduce a bug in isolated environment',
  memo(() => {
    return (
      <>
        <b>This is about component</b>
        <div style={{ border: '1px solid blue', padding: '8px' }}>
          <ComponentWithCounter>
            {({ decrement, increment }) => (
              <>
                <button onClick={increment} type='button'>
                  +
                </button>
                <button onClick={decrement} type='button'>
                  -
                </button>
              </>
            )}
          </ComponentWithCounter>
          <h1>original text</h1>
        </div>
      </>
    );
  })
);

But after removing/commenting out anything related to withCounter HOC About component reacts to changes as it should:

import { memo } from 'react';

// import { withCounter } from '@/withCounter';
import { withRandom } from '@/withRandom';

// const Component = memo(() => (
//   <div style={{ border: '1px solid black', padding: '8px' }}>
//     <b>This is component defined in about.tsx</b>
//   </div>
// ));

// const ComponentWithCounter = withCounter('You are finally awake.', Component);

const About = withRandom(
  'One does not simply reproduce a bug in isolated environment',
  memo(() => {
    return (
      <>
        <b>This is about component</b>
        <div style={{ border: '1px solid blue', padding: '8px' }}>
          {/* <ComponentWithCounter>
            {({ decrement, increment }) => (
              <>
                <button onClick={increment} type='button'>
                  +
                </button>
                <button onClick={decrement} type='button'>
                  -
                </button>
              </>
            )}
          </ComponentWithCounter> */}
          <h1>original text - changed!</h1>
        </div>
      </>
    );
  })
);

Same goes for removing/commenting out anything related to withRandom:

import { memo } from 'react';

import { withCounter } from '@/withCounter';

const Component = memo(() => (
  <div style={{ border: '1px solid black', padding: '8px' }}>
    <b>This is component defined in about.tsx</b>
  </div>
));

const ComponentWithCounter = withCounter('You are finally awake.', Component);

const About = memo(() => {
  return (
    <>
      <b>This is about component</b>
      <div style={{ border: '1px solid blue', padding: '8px' }}>
        <ComponentWithCounter>
          {({ decrement, increment }) => (
            <>
              <button onClick={increment} type='button'>
                +
              </button>
              <button onClick={decrement} type='button'>
                -
              </button>
            </>
          )}
        </ComponentWithCounter>
        <h1>original text</h1>
      </div>
    </>
  );
});

However I see changes in network tab - the browser just does not update for some reason:

Steps to reproduce

1. Open the provided reproduction case
2. Start vite (if it is not already running) with npm run vite:start
3. in src/About.tsx edit text in <h1> tag of About component
4. Browser should be updated with new text that was just edited in the previous step but it isn't

Reproduction

https://stackblitz.com/edit/node-tqfxtx?file=src%2FAbout.tsx

System Info

System:
    OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 9 5900HX with Radeon Graphics
    Memory: 1.73 GB / 7.47 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    npm: 8.2.0 - ~/.nvm/versions/node/v16.13.1/bin/npm
npmPackages:
    @vitejs/plugin-react: ^1.1.4 => 1.1.4 
    vite: ^2.7.10 => 2.7.10

Used Package Manager

npm

Logs

[vite] hot updated: /src/About.tsx

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[NMinhNguyen]

HOCs are actually known to be unhandled by Fast Refresh (if they return class components): https://nextjs.org/docs/basic-features/fast-refresh#limitations

[marovargovcik]

I believe this was closed without a good reason. The HOC in my reproduction link is:

1. not returning class based component
2. the link you sent is talking about not preserving local state of the component after being hot refreshed (updated) and not about the component not being refreshed (updated) at all

[JulienGrv]

I am having a very similar issue and I couldn't find the root cause. I'm also using the react-plugin. Downgrading to older version didn't help. Only the html head is being refreshed but body ignored. Really strange. All I can do is manually refresh with F5

[DKBoston15]

I am having the same issue here and haven't been able to find a solution.

[JulienGrv]

I don't know what I did but the problem is gone now from my side. I regularly update so maybe that's the reason. I was never able to determine the root cause.

[DKBoston15]

I don't know what I did but the problem is gone now from my side. I regularly update so maybe that's the reason. I was never able to determine the root cause.

I figured mine out seconds after posting, just a lack of a capital letter in the import that my editor missed.

[sapphi-red]

I confirmed this still does not work. (Vite 4.0.2 + plugin-react 3.0.0)
https://stackblitz.com/edit/node-w8ab1b?file=src%2FApp.tsx

If I changed any of the following parts, it starts working:

• remove memo from simpleHOC
• remove Component variable or change () => <b>foo</b> to <b>foo</b>
• remove the first argument from simpleHOC

[ArnaudBarre]

This issue will be fixed by #79. Waiting for Vite 4.1 to enable this change

[marovargovcik]

@ArnaudBarre Amazing! Thank you for your work.

[ArnaudBarre]

I will release a 3.1-beta version in the next hour with you want to try

[Looskie]

great work!