React.StrictMode combined with useState causes component to render twice

[TrueWill]

Do you want to request a feature or report a bug?
Bug (maybe)

What is the current behavior?
If wrapped in React.StrictMode and a function component contains a call to useState, the function (render) is called twice - even if the state setter is never called.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.
https://codesandbox.io/s/lyw9514j4q
(please see console)

What is the expected behavior?
I would expect it to only render once.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
16.8.3 in Chrome on macOS Mojave; requires hooks so not tested with previous versions.

This may be related to #12961 - but note that nowhere am I setting state (only initializing it).

If this is expected behavior please feel free to close. Thank you!

[gaearon]

It's an intentional feature of the StrictMode. This only happens in development, and helps find accidental side effects put into the render phase. We only do this for components with Hooks because those are more likely to accidentally have side effects in the wrong place.

[sdennett55]

Sorry, I know this was closed, but you say

We only do this for components with Hooks...

but if your component uses a class -- even if it's stateless -- it also renders twice. Threw me for a loop today trying to figure out why my component wasn't working properly.

export default class App extends React.Component {
  render() {
    console.log('this logs twice with React.StrictMode');
    return null;
  }
}

[gaearon]

Strict Mode always did this for classes. That’s the first thing it ever did. :-)

The question was about function components. So I explained that for function components, this was only on when they contained Hooks. In any case, we’ve changed that too already so it will fire for all function components soon.

[IPetrik]

If I'm understanding the documentation correctly, the purpose of this is to bring the developer's attention to lifestate function that are non-idempotent, because these might cause problems when concurrent mode is rolled out. So, I'm assuming just ignoring double renders that cause double sideeffects in StrictMode is not a good idea for future proofing.

What then, is best practice for functions that get passed to useReducer? Currently, I have a state that is an array, and the actions passed to the reducer are objects to append to the state. The reducer appends and returns the new state. The objects are singletons and may get sent to the dispatch function more than once, so just checking whether that object has been appended already doesn't work. What is the best practice design pattern for an idempotent reducer that appends to the state?

Nevermind, I had a brain fart. It's a non-issue; both times the function is called in this double render, it is called with the same initial state, so appending again and returning will return the same result.

[nermand]

I know this one is closed, but I don't want to open a new ticket just for this.
What am I doing wrong here:
https://codesandbox.io/s/double-event-cb6hg

The first click will be triggered once, but subsequent clicks will add duplicate items.
My real app renders twice and dispatch is triggered twice on every click, this is just a contrived example.

[jaredkhan]

Hey @nermand

(I think) the trouble you're seeing is because state.items.push in your reducer modifies the array in place. This means you're trying to modify a piece of React state outside of the setter for that state.

The use of .push can be replaced with a use of .concat. Sandbox with the fix

Notice that reducer(state, event) still gets called twice for each click (with the same objects for state and event in each call), but it is no longer an issue since state is no longer changed between those two calls. As mentioned above, this is a deliberate behaviour of strict mode to help us notice issues like this.