So I have implemented redux in my application, however, for some reason, one of my components is pretty slow to receive subscribed updates. Essentially, it's a React button that is colored based on a value that is selected by useAppSelector(). However, when I click on the button to check the box, it takes approximately 400ms for the event to complete through render and display that it is now checked. I've timed it and it takes 1ms for the reducer to be called, but 400 ms for the button to receive the updated value. Below is sample code, in this particular component, it's a group of 5 buttons each listening to activeTool.
// Redux slice
interface SliceState {
// Tool is an enum
value = Tool | null
}
const initialState: SliceState {
value = null
}
export const toolSlice = createSlice({
name: 'activeTool',
initialState,
reducers: {
setTool: (state, action: PayloadAction<Tools>) => {
state.value = action.payload
}
}
})
// Selector
const getActiveTool = (state: RootState) => state.activeTool.value
//---------------------
// Component
const Component = (): JSX.Element => {
const dispatch = useAppDispatch()
const activeTool = useAppSelector(getActiveTool)
return (
<ButtonGroup>
<Button
color={activeTool === Tools.Draw ? 'primary' : 'inherit'}
onClick={() => dispatch(setTool(Tools.Draw))
/>
<Button
color={activeTool === Tools.Measure ? 'primary' : 'inherit'}
onClick={() => dispatch(setTool(Tools.Measure))
/>
</ButtonGroup>
)