React-redux can not be used with react 18.3.0 canary

[artem-malko]

What version of React, ReactDOM/React Native, Redux, and React Redux are you using?

• React: 18.3.0-canary-d803f519e-20231020
• ReactDOM/React Native: 18.3.0-canary-d803f519e-20231020
• Redux: 4.2.1
• React Redux: 8.1.3

What is the current behavior?

There is a log in my console:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useMemo') TypeError: Cannot read properties of null (reading 'useMemo')
    at Object.useMemo (webpack-internal:///../../node_modules/react/cjs/react.development.js:1651:21)
    at Provider (webpack-internal:///../../node_modules/react-redux/es/components/Provider.js:23:59)
    at renderWithHooks (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:9010:16)
    at renderIndeterminateComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:9087:15)
    at renderElement (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:9355:7)
    at renderNodeDestructiveImpl (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:9654:13)
    at renderNodeDestructive (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:9608:14)
    at renderContextProvider (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:9315:3)
    at renderElement (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:9438:11)
    at renderNodeDestructiveImpl (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:9654:13)

I use react-redux on a server-side with renderToPipeableStream. Looks like react-redux uses its own version of react — 18.2.0, but I have my own

What is the expected behavior?

• No errors during npm install
• No error logs on an application startup, which uses react canary

Which browser and OS are affected by this issue?

It doesn't matter

Did this work in previous versions of React Redux?

• Yes

[markerikson]

React-Redux does not have "its own version of React". React-Redux v8 should be compatible with all versions of React with hooks (16.8+, 17.x, 18.x).

The error message looks like this is a React-internal issue. Most likely it's trying to access currentDispatcher.useMemo, and something about your build or runtime environment is breaking the actual React setup. All <Provider> is doing here is importing and calling useMemo. If that doesn't work, that's a React / setup problem, not a React-Redux problem.

If you can provide a reproduction, we can maybe take a look, but I would strongly suggest reviewing your own app's setup process.