From 0bb8973ee6245cb9d5c8c0129c2e6ddfb00c9a7c Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Wed, 1 Apr 2020 14:30:57 -0600
Subject: [PATCH] Move rendering of PersistedElements into other lifecycle
 stages

For https://github.com/vector-im/riot-web/issues/12877

Original error:
```
Warning: Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed. If necessary, trigger nested updates in componentDidUpdate.

Check the render method of PersistedElement.
    in PersistedElement (created by AppTile)
    in div (created by AppTile)
    in div (created by AppTile)
    in AppTile (created by AppsDrawer)
    in div (created by AppsDrawer)
    in div (created by AppsDrawer)
    in AppsDrawer (created by AuxPanel)
    in div (created by AutoHideScrollbar)
    in AutoHideScrollbar (created by AuxPanel)
    in AuxPanel (created by RoomView)
    in div (created by RoomView)
    in div (created by MainSplit)
    in MainSplit (created by RoomView)
    in ErrorBoundary (created by RoomView)
    in main (created by RoomView)
    in RoomView (created by LoggedInView)
    in div (created by LoggedInView)
    in DragDropContext (created by LoggedInView)
    in div (created by LoggedInView)
    in LoggedInView (created by MatrixChat)
    in ErrorBoundary (created by MatrixChat)
    in MatrixChat
```
---
 .../views/elements/PersistedElement.js           | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/views/elements/PersistedElement.js b/src/components/views/elements/PersistedElement.js
index d23d6488b6..53f2501f19 100644
--- a/src/components/views/elements/PersistedElement.js
+++ b/src/components/views/elements/PersistedElement.js
@@ -113,10 +113,12 @@ export default class PersistedElement extends React.Component {
 
     componentDidMount() {
         this.updateChild();
+        this.renderApp();
     }
 
     componentDidUpdate() {
         this.updateChild();
+        this.renderApp();
     }
 
     componentWillUnmount() {
@@ -141,6 +143,14 @@ export default class PersistedElement extends React.Component {
         this.updateChildVisibility(this.child, true);
     }
 
+    renderApp() {
+        const content = <div ref={this.collectChild} style={this.props.style}>
+            {this.props.children}
+        </div>;
+
+        ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey));
+    }
+
     updateChildVisibility(child, visible) {
         if (!child) return;
         child.style.display = visible ? 'block' : 'none';
@@ -160,12 +170,6 @@ export default class PersistedElement extends React.Component {
     }
 
     render() {
-        const content = <div ref={this.collectChild} style={this.props.style}>
-            {this.props.children}
-        </div>;
-
-        ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey));
-
         return <div ref={this.collectChildContainer}></div>;
     }
 }