Child components not refresh because shouldComponentUpdate return true.

[wufeng87]

I encounter this problem when using react-refresh, so I wonder if I should add return false when in development mode in shouldComponentUpdate function to solve this problem. Thanks. Best wishes.

shouldComponentUpdate(nextProps, nextState) {
    if (!_.isEqual(nextState, this.state)) {
      return true;
    }
}

[LukasBombach]

I am not sure I understand your description, but this is what I encounter:

I wrote a component that is supposed to prevent hydration and re-renders:

components/DoNotHydrate.tsx

export class DoNotHydrate extends Component<{ children?: ReactNode | undefined; }, Record<string, never>> {
  shouldComponentUpdate(): boolean {
    return false;
  }

  render(): JSX.Element {
    return <>{this.props.children}</>;
  }
}

which works, no rerenders ever happen, I get a static server rendered result.

But once Fast-Refresh (using Next js) kicks in, the children update. Example Code in a next application:

pages/index.tsx

import { useState } from 'react';
import { DoNotHydrate } from '../components/DoNotHydrate';

import type { FC } from 'react';

const Home: FC = () => {
  const [count, setCount] = useState(1);

  return (
    <main>
      <p>
        <strong>hydrate:</strong>
        <span>{count}</span>
      </p>
      <p>
        <strong>do not hydrate:</strong>
        <DoNotHydrate>{count}</DoNotHydrate>
      </p>
      <p>
        <button onClick={() => setCount(count + 1)}>in count</button>
      </p>
    </main>
  );
};

export default Home;

[pmmmwh]

Class components will always re-render on fast refresh. This is a limitation, and if it is not happening it is likely a configuration error, which I will need a reproducible example to help.

[LukasBombach]

Ah ok, my issue matches the expected behavior then.