Redux selector slow

Viewed 138

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>
  )

0 Answers
Related