Too much rerender, whole FlexLayout rerender even when I perform some operation inside any tab

[VishwaGauravIn]

Describe the bug

I was trying to improve the performance of my application built using FlexLayout. When I tried using React Profiler, it shows too much rerendering of the whole FlexLayout even when I do anything inside a tab, without affecting any model change.

Is there any way to fix this? As even in the demo website, it rerenders a lot when anything is changed in any one of the tabs. @nealus @nealatcaplin Please help with this, Thanks

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Open any website built with FlexLayout (even the demo website works)
2. Enable React Profiler
3. perform any action inside a tab
4. check rerenders

Expected behavior

I expect much less rerenders and action inside a tab should not affect whole Layout.

Operating System

macOS and Windows both

Browser Type?

Chrome

Browser Version

136.0.7103.114

Screenshots or Videos

Additional context

No response

[powerdragonfire]

Have see this too! Believe this might be coming from onRenderTabSet(), since I've found, after placing logs, even basic layouts is re-rendering. @nealus any thoughts on this?

[dannyvaughton]

After upgrading from 7->8, I am also seeing a lot of re-renders.

[BingCoke]

you should use memo function. and tell the react which props update will trigger tab rerender

type TProps = {
  tabId: string;
  someCallback: () => void;
  tabInint: () => void
  tabNode: TabNode;
}

const SomeTabContent = memo(({ }: TProps) => {

  return (
    <></>
  )
}, (a, b) => {
  return a.tabId === b.tabId .....
})