Delayed update of Sitecore context

[Katona]

Description

This is a snippet from src/pages/[[...path]].tsx file from an app created by create-sitecore-jss:

      <SitecoreContext
        componentFactory={componentBuilder.getComponentFactory({ isEditing })}
        layoutData={layoutData}
      >
        <Layout layoutData={layoutData} headLinks={headLinks} />
      </SitecoreContext>

The important part is that the SitecoreContext component is passed the layoutData and with that the Sitecore context. However, internally the SitecoreContext component stores the Sitecore context in a state variable and propagates that via React Context. This means when the Sitecore context changes during page navigation for any reason, then the page is rendered first with the 'old' context then when the state is updated inSitecoreContext the page is re-rendered again with the 'new' context, which of course can lead to bugs.

This seems to be a fundamental flaw and given that no one has reported it it's more likely that I am missing something, so please advise.

Additional information

No response

[art-alexeyenko]

Hi @Katona, thanks for the report.
Do you have a scenario we can follow to see the double update? It's definitely something worth investigating.

[Katona]

Hi!

Created a repo demonstrating the issue: https://github.com/Katona/sitecorecontext-bug.

This project has been bootstrapped with create-sitecore-jss so there are more components than what's necessary, but I have created a RouteA.tsx and RouteB.tsx. These are displayed on routes /route-a and /route-b respectively. Both components display the itemId from the context and a link to the other route which can be used to trigger a route change. Furthermore, both components and the [[...path]].tsx logs the itemId from the context.

Now, if you change the route from any route to the other one (e.g. route-a to route-b) then you can see the following on the console:

• [[...path]].tsx is rendered as part of the new route and logs the item id route-b, which is correct.
• RouteB.tsx is rendered (since we are on route-b) and displays the item id route-a, which is incorrect.
• RouteB.tsx is rendered again and displays the item id route-b which is correct.

The reason behind this seems to be what I have described above, that is, the SitecoreContext is passing a state variable through the React context which is updated in a componentDidUpdate.