-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Regression: usePrevious
prematurely updates in StrictMode
— needs to useEffect
#1315
Comments
I'm a bit confused, why the hell It does rendering twice 😱 to suck laptops batteries twice faster?🤔 |
Render functions should be cheap and must not have side effects. From the docs:
|
Well, since you can use hooks only in function components which is renderer as-is, using |
<3 thank you much!
This isn't quite right, if you're curious. (Unless I'm misunderstanding you.) This has been very helpful and enjoyable for me to work through that in my head and write out, thank you for your forbearance. 😄 |
@dcporter AFAIK in general
|
Like you said, function MyComponent() {
return {
jsx: <h1>It's Pure!</h1>,
effects: [{ effector: () => console.log("side effect."), dependencies: [] }]
};
} That's an entirely pure function—totally idempotent, no side effects. You can call it as many times as you want (again, React reserves the right to do this — Suspense being the main reason).
😂 cheers m8 |
Hi Anton, any update on this? Thanks much either way! |
@dcporter i've forgot to push the changes 🤣😅 |
## [15.3.1](v15.3.0...v15.3.1) (2020-06-29) ### Bug Fixes * **usePrevious:** revert the reworked variant as a fix of [#1315](#1315) ([a4279eb](a4279eb))
🎉 This issue has been resolved in version 15.3.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Huge, thanks! |
What is the current behavior?
As of #1295 (v15.3.0), if React renders a component twice before committing (as it does to every component in the excellent
<React.StrictMode>
, and apparently as CodePen does even withoutStrictMode
), the second render will get a prematurely updated value. The React docs (which the react-use docs references) usesuseEffect
for this reason. That PR should be reverted. 😞Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than
react-use
. Paste the link to your JSFiddle or CodeSandbox example below:Use
<StrictMode>
to turn on double-rendering. UseusePrevious
. Note that on the second render, theusePrevious
value is from the first (duplicate, discarded) render, not from the previous commit. This means that, for the render which ends up getting committed, theusePrevious
value that ends up reflected in the DOM is always the current one, not the previous one.What is the expected behavior?
The previous value should not update until after the render is committed, via
useEffect
.A little about versions:
react-use
: 15.3.0The text was updated successfully, but these errors were encountered: