opened
charlie1404
username_0
React version: latest (tested with 16 and 17 both)

## Steps To Reproduce

Please see attached videos for reference and code sandbox for live experiment

1.  Set component in StrictMode but wrapping it in `<React.StrictMode>`
2. Have a useRef in that component which takes empty array as input.
3. Try mutating it on every render, maybe something like `refVar.current.push("doesn't really matter what goes in here")`
4. use that array (have made simple list from that, but should apply to all cases)
5. array is being mutated from different universe.

Link to code example:
https://codesandbox.io/s/strict-bug-mrv-w7r11

## The current behavior
There are console to show the value of array before and after to array mutation.
In strict mode which clicked button array adds extra element (Please see attachment one)

## The expected behavior
I believe this should be same as when not in not strict mode.


Apart from this I also have tried using debugger to see what actually is happening. When added breakpoint to `list.current.push()` it seems devtools is stopping on that line twice. What even more confusing to me is, if in case function ran(rendered) twice, how come there is console only once, please attached video for the same.

Attachments:
 1. https://user-images.githubusercontent.com/20264337/108258484-12ce5300-7186-11eb-8bb2-6e82a14ac856.mov
 2. https://user-images.githubusercontent.com/20264337/108256943-1fea4280-7184-11eb-9840-2dfc243eb6ae.mov
Bug: useRef acting weird in Strict mode.
issue
created
eps1lon
username_1
Thanks for the report. 

That is definitely a common confusion. In case you're not aware of what StrictMode does and why it is used: StrictMode warns about various problematic patterns. 

One of which is having [methods with side-effects that shouldn't have side-effects in React](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects). Mutating a ref is such a side-effect and doing it when rendering a component is problematic. StrictMode calls the render method twice to help detect these problems.

The unfortunate part is that you've also hit another "quirk" of StrictMode (which only applies to React 17): [Calls to console methods during the second render call (by StrictMode) are ignored](https://github.com/facebook/react/pull/18547). There are [plans to enable double-logging in StrictMode](https://github.com/facebook/react/pull/19710). If you're interested in these, please upvote https://github.com/facebook/react/pull/19710.

I hope this clears up any confusion about the observed behavior. Feel free to ask further questions if some explanations are unclear.
comment
closed
bvaughn
username_2
issue
created
bvaughn
username_2
As @username_1 mentioned, mutation during render is specifically something React does not support and `StrictMode` exists to help flush out cases of this. 😄 

I'm going to go ahead and close this issue since everything seems to be working as designed. We can talk more if you still have questions or concerns though! 👍
comment
created
charlie1404
username_0
@username_1 @username_2 Thanks for the explanation, I think I got it.
Yes I was aware that we should not do mutations in render but was not aware of render being called twice in strict mode 😅 

The bigger source of confusion was that console's are being silent. Not sure but to me this behavior by default seems not beginner-friendly.

my use case was to count the number of renders and show them on UI (nothing real but an experiment), which I ended up doing using `useEffect` without dependency array.
comment
created
bvaughn
username_2
Yeah, this is a feature that has pros and cons that have been debated at length (on other issues and within the React team) without a clear solution. We chose the default we thought was best but it's not perfect. In the future we plan to add some extra tools to DevTools to help with discoverability (and maybe to allow you to override the default) FWIW.
comment
created
gaearon
username_3
To follow up on this, we've changed the logging behavior in 18 to be more intuitive.
https://github.com/facebook/react/issues/21783#issuecomment-1083412766
comment