gaearon / gaearon/react-hot-loader
Warning: The final argument passed to useEffect changed size between renders.
- 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.

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
Assessment
This issue has not been assessed yet.