Skip to content

Model updates trigger unnecessary re-renders for tab components #524

@brownstein

Description

@brownstein

Describe the bug

Because the Model is responsible for storing references to mounted components (see movableElement field in src/model/tabNode, and the Model.fromJson method is static and does not accept a parameter for a previous Model instance to copy parameters from, component references are lost when making JSON-based updates.

This complicates usage in conjunction with other stores of state within an application, such as Redux, which expect to be able to pass plain, serializable JSON around. In version 9.0.0, it was possible to manually update the component references with setMovableElement as a workaround, but as of 9.0.1, that method on TabNode was made private, blocking the workaround.

Issue #456 attempts to address the usage issue in the form of a question, but I'm opening this for a more directed, actionable discussion, and to help increase the visibility of PR #522.

Your Example Website or App

https://brownstein.github.io/osts-v3

Steps to Reproduce the Bug or Issue

  1. Set up FlexLayout-React in a Redux app
  2. Wire up a container component that uses a useMemo to generate a Model instance from JSON stored in Redux, and is written to when the Model changes and through Redux actions.
  3. Observe component refreshes when the Model is swapped.

Expected behavior

Model should provide a way to use a previous model with Model.fromJson or TabNode should re-expose setMovableElement.

Operating System

macOS, windows, linux (tested on all 3)

Browser Type?

Google Chrome

Browser Version

148.0.7778.217

Screenshots or Videos

Image

Additional context

In older versions of this package, the Model played a smaller role, and updating it did not block component re-use in tabs. I do agree with the change to store component references within the Model, but the fact that model internals are both unexposed and hidden behind a static instantiaton (Model.fromJson) prevents hydration workarounds that make usage viable in Redux-driven applications.

I have a pull request (#522) to allow .fromJson to accept a previous Model instance to resolve this issue, and I'd like to see some discussion over there.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions