Can React 18 work well with react-redux and react-router?

Question

My current react application has the following versions:

react 17.0.x
react-dom 17.0.x
react-redux 7.2.x
react-router-dom 5.x.x
react-scripts 4.0.x
redux 4.x.x

So my first step to upgrade to react@18 was to update react-scripts to 5.0, I then updated react and react-dom to 18.x (also the @types for each).

Now my main entry file looks like this:

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
 document.getElementbyId("root")
);

This then loads my <App /> which looks like:

const App = () => {
  <ConfigureProvider ... >
    <ConnectedRouter history={history}>
      <Switch> 
        <Router ... />
      </Switch>
    </ConnectedRouter>
  </ConfigureProvider>
}
...
export default connect(mapStateToProps)(App);

I know I have to change this to use createRoot, but does createRoot support me passing in a Provider from react-redux?

Can I continue this upgrade and still use react-redux, redux and react-router-dom or are any of these libraries just not compatible anymore with React 18? I'm not sure how to setup the Provider.

Answer 1

I know I have to change this to use createRoot, but does createRoot support me passing in a Provider from react-redux?

React 18 didn't change how JSX works, just render the redux Provider component where you need it, e.g. wrapping the App component.

import { StrictMode } from "react";
import * as ReactDOMClient from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App";
import store from "./store";

const rootElement = document.getElementById("root");
const root = ReactDOMClient.createRoot(rootElement);

root.render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>
);

Can I continue this upgrade and still use react-redux, redux and react-router-dom or are any of these libraries just not compatible anymore with React 18?

Yes, you can continue the upgrade and use react-redux/redux, though the current recommendation is to install and use Redux Toolkit (@reduxjs/toolkit) as it majorly cuts down on the amount of boilerplate code you need to handwrite yourself (IDK, at least 50%, maybe more).

Only React 18 and pre-v5.3.3 versions of react-router-dom will have problems, and only if you are rendering the app into React's StrictMode component (which you should be). See my answer here regarding the issue and solution. This is a non-issue in [email protected] and beyond.

If you go on to upgrade react-router-dom from v5 to v6 you're going to have a fun ride. 🙃 RRDv6 introduced many breaking changes and new router/routing patterns. Make sure to take a good read through both the Overview and Upgrading from v5 guide to see what will likely be some fundamentally radical changes if you haven't already been introduced to v6. It's nothing too difficult, but speaking from experience I had to "unlearn" a lot of RRDv5 habits and concepts.