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)
  }
  }