fix: avoid double-render (#68)

BREAKING CHANGE: This removes the `componentStack` in the props given to the `FallbackComponent` and `fallbackRender`

Author: kentcdodds

README.md

@@ -70,12 +70,11 @@ its descendants too.
 ```jsx
 import {ErrorBoundary} from 'react-error-boundary'
 
-function ErrorFallback({error, componentStack, resetErrorBoundary}) {
+function ErrorFallback({error, resetErrorBoundary}) {
   return (
     <div role="alert">
       <p>Something went wrong:</p>
       <pre>{error.message}</pre>
-      <pre>{componentStack}</pre>
       <button onClick={resetErrorBoundary}>Try again</button>
     </div>
   )
@@ -98,7 +97,7 @@ You can react to errors (e.g. for logging) by providing an `onError` callback:
 ```jsx
 import {ErrorBoundary} from 'react-error-boundary'
 
-const myErrorHandler = (error: Error, componentStack: string) => {
+const myErrorHandler = (error: Error, info: {componentStack: string}) => {
   // Do something with the error
   // E.g. log to an error logging client here
 }
@@ -118,7 +117,7 @@ import {withErrorBoundary} from 'react-error-boundary'
 
 const ComponentWithErrorBoundary = withErrorBoundary(ComponentThatMayError, {
   FallbackComponent: ErrorBoundaryFallbackComponent,
-  onError(error, componentStack) {
+  onError(error, info) {
     // Do something with the error
     // E.g. log to an error logging client here
   },
@@ -135,12 +134,11 @@ ErrorBoundary's internal state. You can do this various ways, but here's the
 most idiomatic approach:
 
 ```jsx
-function ErrorFallback({error, componentStack, resetErrorBoundary}) {
+function ErrorFallback({error, resetErrorBoundary}) {
   return (
     <div role="alert">
       <p>Something went wrong:</p>
       <pre>{error.message}</pre>
-      <pre>{componentStack}</pre>
       <button onClick={resetErrorBoundary}>Try again</button>
     </div>
   )
@@ -198,9 +196,9 @@ error that React can handle within the children of the `ErrorBoundary`, the
 #### `FallbackComponent`
 
 This is a component you want rendered in the event of an error. As props it will
-be passed the `error`, `componentStack`, and `resetErrorBoundary` (which will
-reset the error boundary's state when called, useful for a "try again" button
-when used in combination with the `onReset` prop).
+be passed the `error` and `resetErrorBoundary` (which will reset the error
+boundary's state when called, useful for a "try again" button when used in
+combination with the `onReset` prop).
 
 This is required if no `fallback` or `fallbackRender` prop is provided.
 
@@ -210,8 +208,7 @@ This is a render-prop based API that allows you to inline your error fallback UI
 into the component that's using the `ErrorBoundary`. This is useful if you need
 access to something that's in the scope of the component you're using.
 
-It will be called with an object that has `error`, `componentStack`, and
-`resetErrorBoundary`:
+It will be called with an object that has `error` and `resetErrorBoundary`:
 
 ```jsx
 const ui = (
@@ -264,7 +261,7 @@ const ui = (
 #### `onError`
 
 This will be called when there's been an error that the `ErrorBoundary` has
-handled. It will be called with two arguments: `error`, `componentStack`.
+handled. It will be called with two arguments: `error`, `info`.
 
 #### `onReset`
 

src/__tests__/index.js

@@ -3,12 +3,11 @@ import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {ErrorBoundary, withErrorBoundary} from '..'
 
-function ErrorFallback({error, componentStack, resetErrorBoundary}) {
+function ErrorFallback({error, resetErrorBoundary}) {
   return (
     <div role="alert">
       <p>Something went wrong:</p>
       <pre>{error.message}</pre>
-      <pre>{componentStack}</pre>
       <button onClick={resetErrorBoundary}>Try again</button>
     </div>
   )
@@ -73,14 +72,6 @@ test('standard use-case', async () => {
       <pre>
         💥 CABOOM 💥
       </pre>
-      <pre>
-        
-        in Bomb
-        in ErrorBoundary
-        in div
-        in div
-        in Unknown
-      </pre>
       <button>
         Try again
       </button>
@@ -170,10 +161,12 @@ test('withErrorBoundary HOC', () => {
   const [error, onErrorComponentStack] = onErrorHandler.mock.calls[0]
   expect(error.message).toMatchInlineSnapshot(`"💥 CABOOM 💥"`)
   expect(onErrorComponentStack).toMatchInlineSnapshot(`
-    "
+    Object {
+      "componentStack": "
         in Unknown (created by withErrorBoundary(Unknown))
         in ErrorBoundary (created by withErrorBoundary(Unknown))
-        in withErrorBoundary(Unknown)"
+        in withErrorBoundary(Unknown)",
+    }
   `)
   expect(onErrorHandler).toHaveBeenCalledTimes(1)
 })
@@ -222,18 +215,6 @@ test('requires either a fallback, fallbackRender, or FallbackComponent', () => {
   ).toThrowErrorMatchingInlineSnapshot(
     `"react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop"`,
   )
-  const [, , [actualError], [componentStack]] = console.error.mock.calls
-  expect(firstLine(actualError)).toMatchInlineSnapshot(
-    `"Error: Uncaught [Error: react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop]"`,
-  )
-  expect(componentStack).toMatchInlineSnapshot(`
-    "The above error occurred in the <ErrorBoundary> component:
-        in ErrorBoundary
-
-    Consider adding an error boundary to your tree to customize error handling behavior.
-    Visit https://fb.me/react-error-boundaries to learn more about error boundaries."
-  `)
-  expect(console.error).toHaveBeenCalledTimes(4)
   console.error.mockClear()
 })
 

src/index.js

@@ -3,52 +3,55 @@ import React from 'react'
 const changedArray = (a = [], b = []) =>
   a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]))
 
-const initialState = {error: null, info: null}
+const initialState = {error: null}
 class ErrorBoundary extends React.Component {
   static getDerivedStateFromError(error) {
     return {error}
   }
 
   state = initialState
+  updatedWithError = false
   resetErrorBoundary = (...args) => {
     this.props.onReset?.(...args)
+    this.reset()
+  }
+
+  reset() {
+    this.updatedWithError = false
     this.setState(initialState)
   }
 
   componentDidCatch(error, info) {
-    this.props.onError?.(error, info?.componentStack)
-    this.setState({info})
+    this.props.onError?.(error, info)
   }
 
   componentDidUpdate(prevProps) {
-    const {error, info} = this.state
+    const {error} = this.state
     const {resetKeys} = this.props
-    if (
-      error !== null &&
-      info !== null &&
-      changedArray(prevProps.resetKeys, resetKeys)
-    ) {
+
+    // There's an edge case where if the thing that triggered the error
+    // happens to *also* be in the resetKeys array, we'd end up resetting
+    // the error boundary immediately. This would likely trigger a second
+    // error to be thrown.
+    // So we make sure that we don't check the resetKeys on the first call
+    // of cDU after the error is set
+    if (error !== null && !this.updatedWithError) {
+      this.updatedWithError = true
+      return
+    }
+
+    if (error !== null && changedArray(prevProps.resetKeys, resetKeys)) {
       this.props.onResetKeysChange?.(prevProps.resetKeys, resetKeys)
-      this.setState(initialState)
+      this.reset()
     }
   }
 
   render() {
-    const {error, info} = this.state
+    const {error} = this.state
     const {fallbackRender, FallbackComponent, fallback} = this.props
 
     if (error !== null) {
-      // we'll get a re-render with the error state in getDerivedStateFromError
-      // but we don't have the info yet, so just render null
-      // note that this won't be committed to the DOM thanks to our componentDidCatch
-      // so the user won't see a flash of nothing, so this works fine.
-      // the benefit of doing things this way rather than just putting both the
-      // error and info setState within componentDidCatch is we avoid re-rendering
-      // busted stuff: https://github.com/bvaughn/react-error-boundary/issues/66
-      if (!info) return null
-
       const props = {
-        componentStack: info?.componentStack,
         error,
         resetErrorBoundary: this.resetErrorBoundary,
       }