[MGNLFE-40] Components in @magnolia/react-editor does not rerender on props change Created: 23/Apr/20  Updated: 20/May/20  Resolved: 15/May/20

Status: Closed
Project: Magnolia Frontend Helpers
Component/s: React Renderer
Affects Version/s: 1.0.0
Fix Version/s: 1.0.2

Type: Bug Priority: Blocker
Reporter: Bartosz Staryga Assignee: Canh Nguyen
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: 0d
Time Spent: 2d
Original Estimate: Not Specified

Issue Links:
Cloners
is cloned by MGNLFE-44 Angular - components do not rerender ... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:
Epic Link: SPA Editor
Sprint: HL & LD 2, HL & LD 3
Story Points: 3

 Description   

All components in @magnolia/react-editor are classes so they do not rerender on new props.
Hence when new page is fetched and new content is passed to Page component id does not update.

It blocks the SPA behaviour.

Please make all the components a stateless ones, as we do not need them to be full blow classes, and stateless ones will fix the issue.

Reported against react; check angular as well.



 Comments   
Comment by Bartosz Staryga [ 28/Apr/20 ]

To see the issue use https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/
And remove in https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/browse/spa/react-minimal/src/App.js#21 `forceRefresh={true}`

The only workaround is to:

  • make component that loads page content a functional component so that we can use async without state
  • explicitly listen on history changes 
  • call the mgnlRefresh not in page loading component but in page components e.g home

That makes the use of the lib not obvious and does not follow normal patter (no developer when using react router will think about explicitly subscribing to history changes)

Generated at Mon Feb 12 05:43:39 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.