Avoiding re-renders with immutable internal state snapshots of the Model

[paralin]

Issue: changing the Model with a new IModelJson causes a full re-render of the page including re-creating all React components for tab contents.

See: caplin#456 (comment)

Reproduction of issue: https://github.com/paralin/flex-layout-issue-3454

This issue explores an approach to avoid re-rendering the layout unnecessarily.

[paralin]

Here was what I came up with:

import React, { PureComponent } from 'react'
import {
  Layout,
  Model,
  TabNode,
  ILayoutProps,
  Action,
  Rect,
} from '@aptre/flex-layout'

/**
 * Optimized Layout Demo
 * 
 * This demonstrates an efficient tab rendering approach for flex-layout:
 *
 * 1. Tab Container Strategy:
 *    - Maintains a container div before the Layout component
 *    - Holds all tab content components
 *    - Uses absolute positioning for visible tabs
 *    - Keeps hidden tabs in DOM with display: none
 *
 * 2. Tab Reference System:
 *    - TabRef components manage visibility/positioning
 *    - Updates CSS properties without re-rendering content
 *    - Handles mount/unmount/resize events
 *
 * 3. Performance Benefits:
 *    - Avoids re-rendering tab contents
 *    - Only updates CSS properties for layout changes
 *    - Maintains component state when hiding/showing tabs
 */

interface ITabRefProps {
  tab: TabNode
  layout: OptimizedLayout 
}

// TabRef manages visibility and positioning of a tab
class TabRef extends PureComponent<ITabRefProps> {
  private resizeListener = (params: { rect: Rect }) => {
    this.updatePosition(params.rect)
  }

  private visibilityListener = (params: { visible: boolean }) => {
    const { tab, layout } = this.props
    if (params.visible) {
      layout.showTab(tab.getId())
    } else {
      layout.hideTab(tab.getId())
    }
  }

  componentDidMount() {
    const { tab, layout } = this.props
    layout.showTab(tab.getId())
    this.updatePosition(tab.getRect())
    tab.setEventListener('resize', this.resizeListener)
    tab.setEventListener('visibility', this.visibilityListener)
  }

  componentWillUnmount() {
    const { tab, layout } = this.props
    layout.hideTab(tab.getId())
    tab.removeEventListener('resize')
    tab.removeEventListener('visibility')
  }

  updatePosition(rect: Rect) {
    if (!rect) return
    this.props.layout.positionTab(this.props.tab.getId(), rect)
  }

  render() {
    return null
  }
}

interface ITabProps {
  tabID: string
  visible?: boolean
  rect?: Rect
  children: React.ReactNode
}

// Tab renders the actual tab content
const Tab: React.FC<ITabProps> = ({ tabID, visible, rect, children }) => {
  return (
    <div
      role="tabpanel"
      aria-labelledby={`tab-button-${tabID}`}
      data-tab-id={tabID}
      style={{
        position: 'absolute',
        display: visible ? 'flex' : 'none',
        left: rect?.x,
        top: rect?.y,
        width: rect?.width,
        height: rect?.height,
      }}
    >
      {children}
    </div>
  )
}

interface IOptimizedLayoutProps {
  model: Model
  renderTab: (tabId: string) => React.ReactNode
  layoutProps?: Partial<ILayoutProps>
}

// OptimizedLayout demonstrates the tab optimization approach
export class OptimizedLayout extends PureComponent<IOptimizedLayoutProps> {
  // Track visible tabs and their positions
  private tabRefs: {
    [tabID: string]: {
      visible: boolean
      rect?: Rect
    }
  } = {}

  showTab = (tabID: string) => {
    this.tabRefs[tabID] = {
      ...this.tabRefs[tabID],
      visible: true,
    }
    this.forceUpdate()
  }

  hideTab = (tabID: string) => {
    this.tabRefs[tabID] = {
      ...this.tabRefs[tabID],
      visible: false,
    }
    this.forceUpdate()
  }

  positionTab = (tabID: string, rect: Rect) => {
    this.tabRefs[tabID] = {
      ...this.tabRefs[tabID],
      rect,
    }
    this.forceUpdate()
  }

  private createComponent = (node: TabNode) => {
    return <TabRef tab={node} layout={this} />
  }

  private onModelChange = (model: Model, action: Action) => {
    // Handle model changes if needed
    console.log('Model changed:', action)
  }

  render() {
    const { model, renderTab, layoutProps } = this.props

    return (
      <>
        <Layout
          model={model}
          factory={this.createComponent}
          onModelChange={this.onModelChange}
          {...layoutProps}
        />
        <>
          {Object.entries(this.tabRefs).map(([tabID, ref]) => (
            <Tab
              key={tabID}
              tabID={tabID}
              visible={ref.visible}
              rect={ref.rect}
            >
              {renderTab(tabID)}
            </Tab>
          ))}
        </>
      </>
    )
  }
}

It renders tabs in a separate <div> and uses position: absolute to position them in the correct space when visible. When invisible we use display: none. This optimizes away the problem of Model causing a re-render of the Layout.

I will have a look at adding this to flex-layout as well.