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.

Modifying a child element in a tab causes the whole tab to rerender

See original GitHub issue

ALL software version info (bokeh, python, notebook, OS, browser, any other relevant packages)

Bokeh 1.0.1

Description of expected behavior and the observed behavior

I’m not sure if this is expected, but modifying the children of say a column, or really any layout container, where said column/container is within a tab, causes the whole Tabs element to be invalidated/rerendered, instead of just that container. This seems like a pretty poor design for how tabs works, because this is really slow if the tabs contain lots of plots (compare to just having columns and rows - updating a one does not invalidate siblings)

Complete, minimal, self-contained example code that reproduces the issue

from bokeh.models.widgets import Panel, Tabs, Button
from bokeh.layouts import row
from bokeh.plotting import figure

p1 = figure(plot_width=300, plot_height=300)
p1.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)
b = Button(label='click')
r = column(column(b, p1))
tab1 = Panel(child=r, title="circle")

p2 = figure(plot_width=300, plot_height=300)
p2.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=3, color="navy", alpha=0.5)
tab2 = Panel(child=p2, title="line")

tabs = Tabs(tabs=[ tab1, tab2 ])

#modifying children causes `tabs` to be completely rerendered
b.on_click(lambda: r.children.append(Button(label='new button')))
layout = tabs

curdoc().add_root(layout)

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
mattpapcommented, Nov 29, 2018

This may be already fixed in PR #8085.

0reactions
mattpapcommented, Mar 12, 2019

Also make sure to tab headers’ scroll doesn’t jump around after modifying tabs, especially after closing tabs (PR #8732).

Read more comments on GitHub >

github_iconTop Results From Across the Web

Changing child component inside Tab rerender Tabs everytime.
When the state of the component that hosts the tab changes, it re renders the entire tab component. For e.g we have parent...
Read more >
Why does my component rerender with React.memo
Memoized Tab component is exported as a named export and the one exported as a default export is NOT memoized. This is why...
Read more >
How and when to force a React component to re-render
React will trigger the normal lifecycle methods for child components, including shouldComponentUpdate() , so we only can force the current ...
Read more >
Optimizing React performance by preventing unnecessary re ...
This article explains how to update components only when necessary, and how to avoid common causes of unintentional re-renders. Use React.memo ...
Read more >
Avoiding React component re-renders with React.memo
A component can re-render even if its props don't change. More often than not this is due to a parent component re-rendering causing...
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