Adding React-Redux to a React app with React.StrictMode tag

Question

The latest create-react-app has <React.StrictMode> tags wrapped around the component by default. Every example I see that adds react-redux to an application does not have React.StrictMode tags in it.

Here is what I have done:

<Provider store={store}>
  <React.StrictMode>
    <App />
  </React.StrictMode>
</Provider>,
document.getElementById('root')

However, I am always seeing:

<Provider store={store}>
  <App />
</Provider>,
document.getElementById('root')

I read up on what StrictMode is used for. I think it helps with debugging and giving insight on problems within the app so I want to keep it when developing. Is what I did correct or should Provider completely replace it like in all of the examples?

Answer 1

React.StrictMode should wrap the whole application including the provider too. So Change your code like bellow:

From

  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>,
  document.getElementById('root')

To

  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')