[bug] all components are re-rendering when there is change to a single component props

[prithviraju1369]

trafficstars

Describe the bug

while using adobe-react-editable-components package's ResponsiveGrid module in remote-spa headless application, All components on the pages are re-rendering even though there is a change of props in one component from the initial pageProps.

Package version 2.1.1

To Reproduce Steps to reproduce the behavior:

consider below json for initially rendering the page

json:

{
    "responsivegrid": {
        ":items": {
            "component_1": {
                "componentId": "cmp1",
                "path": "/content/page/jcr:content/root/responsivegrid/component_1",
                ":type": "aem-page/components/content/component1",
                "header": "header"
            },
            "component_2": {
                "componentId": "cmp2",
                "headerText": "Deals with Appeal",
                "ctaLabel": "View More",
                "path": "/content/page/jcr:content/root/responsivegrid/component2",
                ":type": "aem-page/components/offers-cards",
                "subHeaderText": "sub header"
            }
        },
        "allowedComponents": {
            "components": [],
            "applicable": false
        },
        ":type": "wcm/foundation/components/responsivegrid",
        ":itemsOrder": [
            "component_1",
            "component_2"
        ],
        "columnClassNames":{},
        "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
        "columnCount": 12
    }
}

1. for the initial rendering, passing above props will render both components for the 1st time. 2.Then if the data changes for component_2 from below json example, ideally it should re-render the component_2 only, but with current version of package it re-renders all the components in responsivegrid json.

updated json:

json:

{
    "responsivegrid": {
        ":items": {
            "component_1": {
                "componentId": "cmp1",
                "path": "/content/page/jcr:content/root/responsivegrid/component_1",
                ":type": "aem-page/components/content/component1",
                "header": "header"
            },
            "component_2": {
                "componentId": "cmp2",
                "headerText": "Deals with Appeal",
                "ctaLabel": "View More",
                "path": "/content/page/jcr:content/root/responsivegrid/component2",
                ":type": "aem-page/components/component1",
                "subHeaderText": "**Latest sub header**"
            }
        },
        "allowedComponents": {
            "components": [],
            "applicable": false
        },
        ":type": "wcm/foundation/components/responsivegrid",
        ":itemsOrder": [
            "component_1",
            "component_2"
        ],
        "columnClassNames":{},
        "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
        "columnCount": 12
    }
}

Expected behavior Only component_2 with change in props should re-render, not all components in the json