Problem with components rerendering between panels

[igortas]

Hi,

I have problem, when I have at least two panels, with some components inside both panels and I like to call endpoint in one of the panels and on onSuccess to trigger some local store actions and then the components in the other panel to rerender and gets the new values, but the next panel never gets rerendered.

I've tried the dirty way with ${crypto.randomUUID()} for the PanelGroup not working...

Rerendering works only if the changes comes from the same panel...

      {panes.map((child, index) => {
        return (
          <Fragment key={splitPanes[index].name}>
            <StyledPanel
              id={splitPanes[index].name}
              order={index}
              minSize={splitPanes[index].minSize}
              maxSize={splitPanes[index].maxSize}
            >
              {child}
            </StyledPanel>

Maybe the issue comes from the key that gets set only once and none of the panels gets changed with the name prop, but any other way beside changing those names how to do it the rerender?

BR

[bvaughn]

Please share a Code Sandbox or something I can run and l will take a look. There isnt enough info on this issue for my to understand what you’re asking.

[igortas]

@bvaughn Put some small snippet. As u can see I'm rendering few panels with the key set as per the name I'm providing. Pane1, Pane2 etc. The problem my is: Pane1 have some component which doing some mutation, like post/put, Pane1 gets rerendered after successful mutation, Pane2 not rerendering and in my case should.

Some of the components in Pane1, makes some dispatch actions to update the zustand/redux store, and Pane2 stays frozen, without knowing that store was updated.

[bvaughn]

Small snippet isnt enough, sorry. Share something I can run and see the full problem.

[igortas]

@bvaughn I can't, just need some ideas about forcing the split pane to rerender, I'm not resizing it...

[bvaughn]

Sorry. This isn’t really tech support. I don’t mind looking at bugs with this library, but I need more information to help you than what you seem willing to provide.

[igortas]

@bvaughn I'll try to rephrase it. If I have two static panes, like 60%/40%, how the right pane, can rerender from some changes from the left pane.

Index

<Panes>
   <Container />
   <Sidebar />
</Panes>

Container

   <Button onClick={dispatch()>

Sidebar

  const data = useStore();
   // Sidebar not rerendering, because of static panes, nothings gets rerendered starting from the right panel down the tree, no console.log statement shown in devtools
   <p>{  data }</p>

Despite the dispatch, React not finding anything new to start rerendering...

BR

[bvaughn]

I think you’re just asking a React question that has nothing to do with this library. I think the React docs can help you better understand how to approach this:

https://react.dev/learn/sharing-state-between-components#

If you still have questions, try asking this somewhere like Reddit or Stack Overflow.

[igortas]

@B It's react issue, but arises from the fact that the panes are structured on top of the components like wrapper, and when u show them conditionally, there is no proper way to gets rerendered, once they have some finite state like 'show me only visible panes'.