-
Notifications
You must be signed in to change notification settings - Fork 46.7k
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
Double-invoking the render function in StrictMode is somewhat too deterministic #15065
Comments
A note from my experience: it took me a week to understand it. |
I have the same bug - useReducer was called twice. |
Hi @budarin |
but there is no a description of this "feature" |
I guess this is more of a docs issue. |
useMemo behaviour is described exhaustively unlike strict mode |
I didn't find any mention in the docs that the factory in useMemo is invoked twice in strict mode when dependencies change. |
function useDynamicCallback(callback) {
const ref = useRef()
ref.current = callback
return useCallback((...args) => ref.current.apply(this, args), [])
} Indeed, it's an off topic, so let me comment it here. Usually, it works like this: render1 callback='abc' However, sometimes commits can be skipped. render1 callback='abc' And, there can be time gap between render2 and render3. |
Why should it be 'abc' ? I'm actually expecting it to have the most recent value. |
Because 'def' is thrown away by React. In that situation, the most recent value at that point is 'abc'. Note: This is probably a hypothetical discussion for upcoming concurrent mode. |
It is hard to reproduce the throw-away behavior intentionally. |
I'd take this down. Double-invoking behavior is already confusing people and it's not a good idea to go with more weird behavior. It would be the best to handle this issue with eslint rules/suggestions. |
#18545 looks like related to the concern in this issue. |
Do you want to request a feature or report a bug?
feature in the development mode
What is the current behavior?
Inside
<StrictMode>
, the render function is invoked twice, but always the second one is committed.If the current behavior is a bug, please provide the steps to reproduce 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 dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
https://codesandbox.io/s/k938koy8mv
I made a tiny change in @gaearon 's code.
What is the expected behavior?
Developers can notice the wrong code (unintentionally mutating refs in the render function).
One idea is to occasionally (ex.
Math.random() < 0.25
) commit the first result from double-invoked render function.The other could be to introduce
<StrictStrictMode>
which is to triple-invoke the render function and commit the second one.Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 16.8
The text was updated successfully, but these errors were encountered: