Warning: The final argument passed to useEffect changed size between renders.

[haixiangyan]

Description

"Warning: The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant." appears so many times in my project.

The tech stack I am using are: React.lazy + react-hot-loader + React Router + idb-keyval.

Here's the project I have: A hash router to maintain multple pages. Each page component is a dynamic component created by React.lazy. There's a component providing tab links on top of the Router. The component also use idb-keyval library to access cache from indexedDB.

Problem: If I use any methods or features of react-hot-loader inside the page component, like hot, setConfig. The error above would be thrown.

I know this may not be the best practice for react-hot-loader (README.md said using hot or setConfig at the very beginning or before React). Just curious how this happens. I also dig into the code base and found the wrappedHook function:

  const wrappedHook = function(cb, deps) {
    if (configuration.reloadHooks && deps) {
      const inputs = [...deps];

      // reload hooks which have changed string representation
      if (configuration.reloadHooksOnBodyChange) {
        inputs.push(String(cb));
      }

      if (
        // reload hooks with dependencies
        deps.length > 0 ||
        // reload all hooks of option is set
        (configuration.reloadLifeCycleHooks && deps.length === 0)
      ) {
        inputs.push(getHotGeneration());
      }

      return hook(cb, inputs);
    }
    return hook(cb, deps);
  };

Seems this is related to the warning I have? If that so, would it potentially validate the "changing deps array size" rule of React?

The code base is so large to me. So, that's how far I got. 😢 Can anyone help me with this? Thx.

A minimum reproducible demo is below.

Expected behavior

No warning.

Actual behavior

What actually happens:

"Warning: The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant."

Environment

React Hot Loader version: ^4.13.0

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

1. node -v:v12.16.3
2. npm -v:6.14.4

Then, specify:

1. Operating system: Mac OS Big Sur 11.2.2
2. Browser and version:

Reproducible Demo

Here's the minimum reproducible demo on my github:

https://github.com/Haixiang6123/react-hot-loader-error