Simple React+Redux app causes "WARNING: The final argument passed to useMemo changed size between renders." for every state change

  react-redux, reactjs, redux, typescript

I have made a very simple react+redux app, but with any action dispatched, I get 7 warnings in browser console regarding mismatch in arguments of useMemo. Below is the first one:

Warning: The final argument passed to useMemo changed size between renders. The order and size of this array must remain constant.

Previous: [[object Object]]
Incoming: [[object Object], function () {
        // Distinguish between actual "data" props that were passed to the wrapper component,
        // and values needed to control behavior (forwarded refs, alternate context instances).
        // To maintain the wrapperProps object reference, memoize this destructuring.
        var forwardedRef = props.forwardedRef,
            wrapperProps = Object(_babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_1__["default"])(props, ["forwardedRef"]);

        return [props.context, forwardedRef, wrapperProps];
      }, 0]
    in ConnectFunction
    in Provider

I am not using useMemo myself and it is only being triggered from react-redux package and simplified the code so much to get to this and still I cannot figure out what to do to identify the issue. Any ideas? (below is my entire code)

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { connect, Provider } from "react-redux";
import { createStore, Dispatch } from 'redux';

const increment = () => ({ type: 'INCREMENT' });
const counterReducer =
    (state = 10, action: { type: string }) => (action.type === 'INCREMENT') ? state + 1 : state;

interface Props { count: number }
interface Actions { inc: () => {} };
class AppComponent extends React.Component<Props & Actions> {
    render = () =>
    (<>
        Count: {this.props.count}
        <button onClick={this.props.inc}>+</button>
    </>);
}
const mapStateToProps = (state: number) : Props => ({ count: state });
const mapDispatchToProps = (dispatch: Dispatch) => ({ inc: () => dispatch(increment()) });
const App = connect(mapStateToProps, mapDispatchToProps)(AppComponent);

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

There are actually more warnings and they all come from the connect part of react-redux. Every call of useMemo in the ConnectFuncion is causing a warning similar to that.

The entire code can be accessed on this GitHub repo: https://github.com/Reza1024/react-typescript-webpack-rush-template. You probably need to do a rush update and rush build first before doing npm run start in the app folder.

Source: ReactJs

One Reply to “Simple React+Redux app causes "WARNING: The final argument passed to useMemo changed size between renders." for every state change”

LEAVE A COMMENT