Is it true that for 0.3 or 0.6 seconds of sliding a panel away using React / Redux, we'd already have to dispatch two actions to handle it?

Question

If a React panel is somewhat computation heavy during the rendering, and we'd like to make it disappear when the main page is also rendering something, it would speed up the page update by sliding the panel to the left or right of the page and hide it. (the page is constantly doing data visualization both in the panel and in the main page).

However, it'd be strange, if the panel all of a sudden becomes blank or becomes width: 0 due to the state isMainPageConstantlyUpdating is true and the panel has the line:

    if (isMainPageConstantlyUpdating) return <div></div>;

In that case, do we really have to dispatch an action, to set the redux state of isMainPageConstantlyUpdating, and then slide the panel to the left, and then at the transitionend event, dispatch another action such as isMainPageConstantlyUpdatingForFullWindow, and if this is true, then do the return <div></div>? (because the panel is already out of sight).

It seems no matter how I handle it, it probably has to have this two actions dispatched. Can it be handled in a simpler way, such as, can the content inside the panel be somehow made to not update, and the panel slided away? This way, all it involves can be one state, which is isMainPageConstantlyUpdating, and we make it not update the panel, and slide it away and be done. But this has to do with freezing the data, which is typically not how React / Redux works (the data constantly gets updated into the redux store normally and provided to a component).

It seems we may be able to use useMemo to memoize the props, or the final JSX, such as:

const jsx = useMemo(() => {  return someResults(); }, 
                    [isMainPageConstantlyUpdating || someTimeStamp]);

so when isMainPageConstantlyUpdating is false, the array element gets the timestamp, and will redo the computation, but when isMainPageConstantlyUpdating is true, then it will keep on being true and therefore not call the function to update the content, but this is also making it quite complicated.

Answer 1

I am trying and it seems one solution is that we don't have to manage this "micro state" of after 0.3 seconds.

We simply can use a local state, such as

const [isNotToRender, setIsNotToRender] = useState(false);

so that for any animation end, we have a listener for it, and then set isNotToRender to true, and when true, then don't return any complicated rendering, but simply return <div></div> if we want.

I know the offical Redux example docs basically dispatch almost everything. It was almost only dispatching to get something ultimately done. I think it was dispatching something, and then use useEffect(fn, [someState]) to kick start some behaviors. That might be one way, but sometimes my style is more like: doing things when it needs to be done, and only dispatch to alter something that is more related to the data or important states of the app.