mqtt-react-hooks Subscriber stops working after one message - react-redux

Question

I have a simple react app using mqtt-react-hooks and redux. I want to update my redux store each time a new message is received by a Subscriber.
Subscriber.tsx
import React, { useEffect} from 'react';
import { useSubscription } from 'mqtt-react-hooks';
import { useAppDispatch } from '../features/item/hooks';
import { addItem } from '../features/item/item-slice';
const Subscriber = () => {
const { message } = useSubscription('queue');
const dispatch = useAppDispatch();
useEffect(() => {
if (message && message.message) {
dispatch(addItem(JSON.parse(message.message)));
}
}, [message]);
return (
<span>{message}</span>
);
};
export default Subscriber
App.tsx
import React from 'react';
import './App.css';
import {useAppSelector} from './features/item/hooks'
import { Connector } from 'mqtt-react-hooks'
import Subscriber from './mqtt/Subscriber'
function App() {
const items = useAppSelector((state) => state.item.items);
return (
<>
<Connector brokerUrl="ws://localhost:9001"
options={{keepalive: 10}}>
<div className="item-holder">
{Array.from(items, ([key, it]) => ({ key, it })).map( (kvp) => { return <div>{kvp.it} key={kvp.key}></div>})}
</div>
<Subscriber />
</Connector>
</>
);
}
export default App;
If I remove the useEffect from the Subscriber, the message gets received and updated. And I can send as many messages as I want. However, when I call the dispatch(addItem(... inside the useEffect, it will receive the first message, but ignores all future messages. My mosquitto broker says that the client has closed the connection. It never attempts to reconnect.
I'm very new to react. I have a feeling I'm not doing this right at all. What I really want is a redux store that maintains state based off of messages coming from an mqtt topic. The app has buttons that allows the user to publish messages back to the mqtt broker and change the redux state.
EDIT
As requested, here's the addItem code.
import {createSlice, PayloadAction} from '#reduxjs/toolkit'
interface ItemState {
items: Item[],
}
const initialState: ItemState = {
items: []
}
const orderSlice = createSlice({
name: 'items',
initialState,
reducers: {
addItem(state, action: PayloadAction<Item>) {
state.items.push(action.payload);
return state;
}
}
});
export const { addItem } = itemSlice.actions;
export default itemSlice.reducer;
And the useAppDispatch comes from ./features/item/hooks
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import { RootState, AppDispatch } from './item-store'
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
However, I will add that I got rid of this and used the usual useDispatch and useSelector instead of the "useApp____" versions and got the same result.
I believe the issue lies in the mqtt-react-hooks hooks but my react-fu skills are not yet high enough to solve.

Answer 1

It looks like there is a sequence of things happening that is causing Connector to rerender and drop the connection, here's what I think is going on:
App is subscribing to store state, causing it to rerender every time a new message is received.
You're recreating your mqtt config object every time App renders, because you're passing an object literal {keepalive: 10}
In Connector.tsx line 48, the mqttConnect callback depends on the mqtt options object. React does a referential equality check, sees the options have changed, and causes the callback to be recreated.
In Connector.tsx line 59, this causes the useEffect to rerun because the callback changed, which calls its teardown function, which ends the mqtt connection.
To fix it, you should create your MQTT options outside of App so that they don't change.