Modifying a child element in a tab causes the whole tab to rerender
See original GitHub issueALL 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:
- Created 5 years ago
- Comments:6 (4 by maintainers)
Top 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 >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
This may be already fixed in PR #8085.
Also make sure to tab headers’ scroll doesn’t jump around after modifying tabs, especially after closing tabs (PR #8732).