feat(onResetKeysChange): handle when the reset keys change (#52)

Author: kentcdodds

README.md

@@ -45,6 +45,7 @@ then be gracefully handled.
   - [`onError`](#onerror)
   - [`onReset`](#onreset)
   - [`resetKeys`](#resetkeys)
+  - [`onResetKeysChange`](#onresetkeyschange)
 - [Issues](#issues)
   - [🐛 Bugs](#-bugs)
   - [💡 Feature Requests](#-feature-requests)
@@ -273,10 +274,10 @@ state (which will result in rendering the `children` again). You should use this
 to ensure that re-rendering the children will not result in a repeat of the same
 error happening again.
 
-`onReset` will be called with whatever `resetErrorBoundary` is called with. In
-the case of `resetKeys`, it's called with the `prevResetKeys` and the
-`resetKeys`. This can help you differentiate between a reset that occurred due
-to a "try again" button click and one trigged by a `resetKeys` change.
+`onReset` will be called with whatever `resetErrorBoundary` is called with.
+
+**Important**: `onReset` will _not_ be called when reset happens from a change
+in `resetKeys`. Use `onResetKeysChange` for that.
 
 ### `resetKeys`
 
@@ -288,6 +289,11 @@ then it will reset automatically (triggering a re-render of the `children`).
 
 See the recovery examples above.
 
+### `onResetKeysChange`
+
+This is called when the `resetKeys` are changed (triggering a reset of the
+`ErrorBoundary`). It's called with the `prevResetKeys` and the `resetKeys`.
+
 ## Issues
 
 _Looking to contribute? Look for the [Good First Issue][good-first-issue]

index.d.ts

@@ -7,20 +7,23 @@ export interface FallbackProps {
 }
 
 export interface ErrorBoundaryPropsWithComponent {
+  onResetKeysChange?: (prevResetKeys: Array<any>, resetKeys: Array<any>) => void
   onReset?: () => void
   onError?: (error: Error, componentStack: string) => void
   resetKeys?: Array<any>
   FallbackComponent: React.ComponentType<FallbackProps>
 }
 
 export interface ErrorBoundaryPropsWithRender {
+  onResetKeysChange?: (prevResetKeys: Array<any>, resetKeys: Array<any>) => void
   onReset?: () => void
   onError?: (error: Error, componentStack: string) => void
   resetKeys?: Array<any>
   fallbackRender: (props: FallbackProps) => React.ReactElement<any, any> | null
 }
 
 export interface ErrorBoundaryPropsWithFallback {
+  onResetKeysChange?: (prevResetKeys: Array<any>, resetKeys: Array<any>) => void
   onReset?: () => void
   onError?: (error: Error, componentStack: string) => void
   resetKeys?: Array<any>

src/__tests__/index.js

@@ -255,6 +255,7 @@ test('supports automatic reset of error boundary when resetKeys change', () => {
   const handleReset = jest.fn()
   const TRY_AGAIN_ARG1 = 'TRY_AGAIN_ARG1'
   const TRY_AGAIN_ARG2 = 'TRY_AGAIN_ARG2'
+  const handleResetKeysChange = jest.fn()
   function App() {
     const [explode, setExplode] = React.useState(false)
     return (
@@ -276,6 +277,7 @@ test('supports automatic reset of error boundary when resetKeys change', () => {
             setExplode(false)
             handleReset(...args)
           }}
+          onResetKeysChange={handleResetKeysChange}
           resetKeys={[explode]}
         >
           {explode ? <Bomb /> : null}
@@ -298,6 +300,7 @@ test('supports automatic reset of error boundary when resetKeys change', () => {
   expect(handleReset).toHaveBeenCalledWith(TRY_AGAIN_ARG1, TRY_AGAIN_ARG2)
   expect(handleReset).toHaveBeenCalledTimes(1)
   handleReset.mockClear()
+  expect(handleResetKeysChange).not.toHaveBeenCalled()
 
   // blow it up again
   userEvent.click(screen.getByText('toggle explode'))
@@ -307,9 +310,10 @@ test('supports automatic reset of error boundary when resetKeys change', () => {
 
   // recover via resetKeys change
   userEvent.click(screen.getByText('toggle explode'))
-  expect(handleReset).toHaveBeenCalledWith([true], [false])
-  expect(handleReset).toHaveBeenCalledTimes(1)
-  handleReset.mockClear()
+  expect(handleResetKeysChange).toHaveBeenCalledWith([true], [false])
+  expect(handleResetKeysChange).toHaveBeenCalledTimes(1)
+  handleResetKeysChange.mockClear()
+  expect(handleReset).not.toHaveBeenCalled()
   expect(screen.queryByRole('alert')).not.toBeInTheDocument()
   expect(console.error).not.toHaveBeenCalled()
 })

src/index.js

@@ -20,7 +20,8 @@ class ErrorBoundary extends React.Component {
     const {error} = this.state
     const {resetKeys} = this.props
     if (error !== null && changedArray(prevProps.resetKeys, resetKeys)) {
-      this.resetErrorBoundary(prevProps.resetKeys, resetKeys)
+      this.props.onResetKeysChange?.(prevProps.resetKeys, resetKeys)
+      this.setState(initialState)
     }
   }