Bug Report T1266560
Visible to All Users

Item component and nested React components are rendered multiple times

created 3 months ago (modified a month ago)

Samples:

TabPanel
Accordion

Current results:

  • NestedItem is rendered 3 times.
  • NestedItemContent is rendered 9 times.
  • ItemContent is rendered 2 times.
    chrome_yqGXDGpDOF.png

Expected results:

  • NestedItem is only rendered once.
  • NestedItemContent is only rendered once.
  • ItemContent is not rendered. It should only be rendered when Item 2 is selected.

Additional information:

Workaround

If your React Component is defined within a component that supports templates (Popup, Splitter, etc.), you can relocate the Compoent to its ***Render or ***Component props to prevent unnecessary re-rendering.

Show previous comments (14)

    Not sure, if this is a workaround, but editing source code in "node_modules/devextreme-react/esm/core/component-base.js" did some work.
    node_modules/devextreme-react/esm/core/component-base.js, line 307, col 122
    replaced _renderChildren() by an empty array

    JavaScript
    return (React.createElement(RestoreTreeContext.Provider, { value: restoreTree }, React.createElement(TemplateDiscoveryContext.Provider, { value: { discoveryRendering: false } }, createPortal(React.createElement(TemplateDiscoveryContext.Provider, { value: { discoveryRendering: true } }, []/*_renderChildren() replaced by an empty array*/), templateContainer), React.createElement("div", { ...getElementProps() }, React.createElement(NestedOptionContext.Provider, { value: context }, renderContent()), React.createElement(TemplateManager, { init: setTemplateManagerHooks, onTemplatesRendered: onTemplatesRendered }), isPortalComponent && React.createElement(NestedOptionContext.Provider, { value: context }, renderPortal())))));

    Deep test is required, but works for me at least.
    Remove bundler's cache before try.
    I am using vite, and just removed node_modules/.vite/deps directory before test.

      Just checking if any update on a fix making it's way into a release soon ? thanks.

      Artem (DevExpress Support) 16 days ago

        Hello,

        We identified a solution to the issue and are currently running final tests before we can integrate it. If all goes well, we'll release the patch next week. I will inform you if there are any changes.

        Answers approved by DevExpress Support

        created 10 days ago (modified 8 days ago)

        We have addressed the issue described in this ticket and will include a fix in our next maintenance update. Should you need to apply our fix prior to official release, you can request a hotfix here.

        Important Notes:

        • Hotfixes may be unavailable for Early Access/Beta builds or updates set for release within a week.
        • .NET only: in the NuGet Package Manager, use your personal NuGet feed and check the "Include prerelease" option to view the hotfix package in the "Updates" tab.
        Additional information:

        Our goal is to completely eliminate unnecessary rendering for all components. Due to the urgency of the issue, we decided to release a fix that addresses most of the reported performance issues.

        This fix completely resolves the issue for most components and they are rendered once. This fix also drastically reduces the number of React renders for a few components and now they are rendered only twice. These components can accept both templates and child configuration components. Examples of such components are: Chart.Annotation, ContextMenu.Item, Menu.Item, Form.Item/GroupItem/SimpleItem.

          Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

          Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.