React.useEffect's callback will be called when the page is updated

[MisterLuffy]

Description

Bug: React-hot-loader works not fine with React.useEffect. React.useEffect's callback function will be called regardless of whether the dependent project get changed when page is updated.

Expected behavior

If the dependencies are not changed, callback should not be triggered.

Environment

React Hot Loader version: 4.13.0

Run these commands in the project folder and fill in their results:

1. node -v: 14.15.1
2. npm -v: 6.14.8

Then, specify:

1. Operating system: macOS Catalina 10.15.5
2. Browser and version: Google Chrome | 86.0.4240.198

Reproducible Demo

View the code below, when I edit the content of p, state count will be increased.

import { hot } from 'react-hot-loader/root';
import React, { useEffect, useState } from 'react';

function Page() {
  const flag = 0;
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(count + 1);
  }, [flag]);

  return (
    <>
      <h1>{count}</h1>
      <p>Hello world!</p>
    </>
  );
}

export default hot(Page);

[PengJiyuan]

@gaearon @theKashey

[theKashey]

When any file got changed all useEffect/useMemo is reset. React-Hot-Loader cannot determine how the React tree is "connected" to the module system, so it nukes everything.
Fast Refresh works a little differently and actually knows more about updates. Consider migrating to it - #1453