question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Persist panel sizes after re-render

See original GitHub issue

When 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:closed
  • Created 7 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
DanFesslercommented, Dec 9, 2016

image

Glad it helped 😃 Closing this issue

1reaction
DanFesslercommented, Dec 9, 2016

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:

let DefinedLayout = React.createClass({
  getInitialState: function() {
    return {
      counter: 0,
      panelWidths: [
        {size: 100, minSize:50, resize: "dynamic"},
        {minSize:100, resize: "stretch"},
        {size: 100, minSize:50, resize: "dynamic"}
      ]
    }
  },

  handleClick: function() {
    this.setState({counter: this.state.counter + 1});
  },

  handlePanelUpdate: function(widths) {
    this.setState({panelWidths: widths})
  },

  render: function() {
    return (
      <div style={{height: "100%"}}>
        <div><input type="button" value={"Update me: " + this.state.counter} onClick={this.handleClick}/></div>
        <PanelGroup borderColor="#DDD" spacing={2} onUpdate={this.handlePanelUpdate} panelWidths={this.state.panelWidths}>
          <Content>panel 1</Content>
          <Content>panel 2</Content>
          <Content>panel 3</Content>
        </PanelGroup>
      </div>
    )
  }
})
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found