gaearon / gaearon/react-hot-loader

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

Open
#1,606 0 comments 2 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.2k
Forks
775
PR merge metrics
No merged PRs in 30d

Description

### 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.

![image](https://user-images.githubusercontent.com/17061654/111861013-fe989400-8985-11eb-82f2-c7172c3606b9.png)

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:

```ts
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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.