Persist panel sizes after re-render
See original GitHub issueWhen I update some child component of a panel, the panel is re-rendered with the initial sizes. I am sure that this is not working as intended, but I can’t find away past it.
I have tried to tie the onUpdate to a state change, figuring that I could catch the new sizes, and apply it to the component when react re-renders. However, it seems that onUpdate is triggered by the re-rendering, and I have a loop on my hands. onUpdate is triggered even before i tie the panelWidths to the state.
What am I doing wrong? I am fairly new to react and I might be missing some key insight here.
windowResize(sizes) {
//setting the state to something, forcing a re-render, and then onUpdate triggers
this.setState({test:"test"});
}
render() {
...
return <PanelGroup style={{height:"100%"}} borderColor="grey" onUpdate={this.windowResize} panelWidths={[
{size: 100, minSize:50, resize: "dynamic"},
{minSize:100, resize: "stretch"},
{size: 100, minSize:50, resize: "dynamic"}]}>
...
</PanelGroup>
}
//I added this to stop an infinite loop. Counter defined elsewhere
shouldComponentUpdate(nextProps, nextState) {
counter++;
return counter<100;
}
Issue Analytics
- State:
- Created 7 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Why is nextjs persistent layout re-rendering all the time?
The layouts will 'persist' between pages - the children should rerender on a route change but, components that are still on the page...
Read more >How to Save State to LocalStorage & Persist on Refresh with ...
You can even select your stored value in the Local Storage panel, hit the Delete key, and refresh the page (or just clear...
Read more >React Re-render Optimization - Medium
The fix was simple for this case. Pass in only the relevant value. For example, if a component only uses the object id,...
Read more >Sub Output Panel not rendering on Re-render
When I load "DisplaySection" directly from the controller, the OutputPanel renders as expected. When "DisplaySection" is rendered after clicking ...
Read more >Basics of rendering and exporting in After Effects CC
Learn how to render and export in After Effects using the Render Queue panel and Media Encoder and what are the supported output...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Glad it helped 😃 Closing this issue
Alright, so I’d be very surprised if it was a child of the PanelGroup that was causing the re-render. Updating children shouldn’t change anything. But if you update the parent of a PanelGroup, and you’re defining your own panelWidths, then yes it will re-render and reset the widths unless you’re managing the widths of the PanelGroup in the parent’s state. I can probably streamline this in the future so this wouldn’t be necessary.
Hooking it up to state should be fairly painless. Instead of supplying the widths array directly as a prop, instead define it in the parent’s state and reference that array as your prop. Your onUpdate function should receive a new array, and setState on the parent with it to replace the old value.
Example: