Change in Redux state object value not re-rendering

Question

I have an object in my store that I can being updated when actions are dispatched. But I'm not seeing the updated value for totalDevices displayed on the page. It stays with the original render. What am I doing wrong?

State

{
  deviceCount: {
    'projectId:ed4b4e40-d4e2-4540-8359-c002526f2793': {
      totalDevices: 1,
      error: {}
    },
    'projectId:a6293167-ade2-4e22-98f0-70260fcee7f7': {
      totalDevices: 0,
      error: {}
    }
  }
}

Component

  const selectDeviceCount = useSelector((state) => state.deviceCount);
  const [currDeviceCount, setCurrDeviceCount] = useState(selectDeviceCount); // Using to display value of totalDevices for each item in object

  useEffect(() => {
    loadDeviceCountByProjectID({ projectId });
  }, [loadDeviceCountByProjectID]);

  useEffect(() => {  // Should this hook trigger a rerender on currDeviceCount? 
    setCurrDeviceCount(
      selectDeviceCount
    );
  }, [selectDeviceCount]);

  return (
    <ListItem
      className={variation === 'block' ? classes.listItem : ''}
      key={projectId}
      button
      component={Link}
      to={`/${organizationName}/${name}?per_page=10&page=1`}
    >
      <ListItemText>
            {name}
          </span>
        }
      />
      <ListItemAvatar className={classes.devicesAvatar}>
        <>
          <TabletAndroidIcon className={classes.deviceIcon} />
          <Typography variant="caption">
            // Conditional rendering to prevent errors when state is undefined on first load
            {selectDeviceCount.length > 0
              ? selectDeviceCount[`projectId:${projectId}`]?.totalDevices
              : 0}
          </Typography>
        </>
      </ListItemAvatar>
    </ListItem>
  );

Answer 1

Your use of hooks is fine, and your state should be changing. But you're measuring selectDeviceCount.length in your render, but selectDeviceCount is an object, and therefore has a length of 0. If you want to measure the number of keys inside the selectDeviceCount object, do Object.keys(selectDeviceCount).length

To mitigate selectDeviceCount being undefined, simply initialize the state to an empty object by doing useState({})

Below is the area where your code has the issue.

<Typography variant="caption">
            // Conditional rendering to prevent errors when state is undefined on first load
            {Object.keys(selectDeviceCount).length > 0
              ? selectDeviceCount[`projectId:${projectId}`]?.totalDevices
              : 0}
          </Typography>