Protect against render loops caused by errors

Author: kitten

src/render/classComponent.js

@@ -24,10 +24,13 @@ import {
   getCurrentErrorFrame
 } from '../internals'
 
+const RE_RENDER_LIMIT = 25
+
 const createUpdater = () => {
   const queue = []
 
   return {
+    _thrown: 0,
     queue,
     isMounted: () => false,
     enqueueForceUpdate: () => null,
@@ -190,12 +193,21 @@ export const update = (queue: Frame[], frame: ClassFrame) => {
   setCurrentErrorFrame(frame.errorFrame)
 
   if (frame.error) {
-    if (typeof frame.instance.componentDidCatch === 'function')
+    // We simply have to bail when a loop occurs
+    if (++frame.instance.updater._thrown >= RE_RENDER_LIMIT) return null
+
+    frame.instance._isMounted = true
+
+    if (typeof frame.instance.componentDidCatch === 'function') {
       frame.instance.componentDidCatch(frame.error)
-    if (typeof frame.type.getDerivedStateFromError === 'function')
+    }
+
+    if (typeof frame.type.getDerivedStateFromError === 'function') {
       frame.instance.updater.enqueueSetState(
+        frame.instance,
         frame.type.getDerivedStateFromError(frame.error)
       )
+    }
   }
 
   return render(frame.type, frame.instance, queue)

src/visitor.js

@@ -218,7 +218,7 @@ const visitLoop = (
     const errorFrame = getCurrentErrorFrame()
     if (!errorFrame) throw error
     errorFrame.error = error
-    queue.push(errorFrame)
+    queue.unshift(errorFrame)
     return false
   } finally {
     ReactCurrentDispatcher.current = prevDispatcher
@@ -247,8 +247,6 @@ export const visit = (
   queue: Frame[],
   visitor: Visitor
 ) => {
-  if (!init.length) return
-
   const traversalChildren: AbstractElement[][] = [init]
   const traversalMap: Array<void | ContextMap> = [flushPrevContextMap()]
   const traversalStore: Array<void | ContextEntry> = [flushPrevContextStore()]
@@ -305,9 +303,9 @@ export const update = (frame: Frame, queue: Frame[], visitor: Visitor) => {
     const prevDispatcher = ReactCurrentDispatcher.current
     let children = null
 
-    try {
-      ReactCurrentDispatcher.current = Dispatcher
+    ReactCurrentDispatcher.current = Dispatcher
 
+    try {
       if (frame.kind === 'frame.class') {
         children = updateClassComponent(queue, frame)
       } else if (frame.kind === 'frame.hooks') {
@@ -319,7 +317,7 @@ export const update = (frame: Frame, queue: Frame[], visitor: Visitor) => {
       const errorFrame = getCurrentErrorFrame()
       if (!errorFrame) throw error
       errorFrame.error = error
-      queue.push(errorFrame)
+      queue.unshift(errorFrame)
       children = null
     } finally {
       ReactCurrentDispatcher.current = prevDispatcher