❔ So even though panelToShow has a dep on crumbEvent,crumbId -> which come from the useHistory hook (which should change when the URL changes?) it doesn't trigger this effect?

disregard any stuff I said in chat. my original assumptions were wrong. this does trigger, but on the render that triggers, the panel still renders using the old currentPanelView value from State. that is fine except that those components get props which are (in part) based on data from useLocation. so it's like half the data is at time t and half is at time t + 1

This gif shows me debugging the issue on master. First I added this code above the return in panel.tsx

  console.log(
    'panelToShow',
    panelToShow,
    'currentPanelView',
    currentPanelView,
    'relatedStatsForIdFromParams',
    relatedStatsForIdFromParams
  );

The goal is to show that panelToShow and currentPanelView are out of sync, and that other values which are used as props to panels aren't in sync with currentPanelView because they are (in part) based on useHistory (or useLocation, or anything else not in redux.) Normally redux makes all state transitions atomic and ensures that all pieces of state are in sync.

In the gif, when the error occurs I scroll up and you can see this:

currentPanelView is eventCountsForProcess. That renders the EventCountsForProcess component which takes relatedStatsForIdFromParams. In fact the code assumes that relatedStatsForIdFromParams will be truthy if currentPanelView is eventCountsForProcess. You can see that relatedStatsForIdFromParams is actually undefined. It is based (in part) on idFromParams which is in turn based on queryParams which is based on useHistory (or useLocation.)

Data from useHistory (or useLocation) will be up to date at the time of render. But currentPanelView is behind because this component dispatches and event which changes it whenever panelToView changes.

The solution in the PR isn't a good long term solution. Values calculated in the render method of this component use data from redux and data thats not from redux. It also updates the redux data (via dispatch) based on data not from redux. Without a single, atomically modified, state container that is shared across all components, keeping this stuff in sync will be tricky.

It is passed with the non-null assertion operator, so typescript doesn't catch the fact that it's undefined.

Initially, you asked for that so that we at least had some valence with which panel was showing in state. Is there a way to synchronize it / make it work so it doesn't twitch when the URL changes?