Represents an error boundary component in React.

Hierarchy

  • Component<IErrorBoundaryProps, IErrorBoundaryState>
    • ErrorBoundary

Constructors

  • Parameters

    • props: IErrorBoundaryProps

    Returns ErrorBoundary

Properties

context: unknown

If using the new style context, re-declare this in your class to be the React.ContextType of your static contextType. Should be used with type annotation or static contextType.

static contextType = MyContext
// For TS pre-3.7:
context!: React.ContextType<typeof MyContext>
// For TS 3.7 and above:
declare context: React.ContextType<typeof MyContext>
props: Readonly<IErrorBoundaryProps>
refs: {
    [key: string]: ReactInstance;
}
state: Readonly<IErrorBoundaryState>
contextType?: Context<any>

If set, this.context will be set at runtime to the current value of the given Context.

Usage:

type MyContext = number
const Ctx = React.createContext<MyContext>(0)

class Foo extends React.Component {
static contextType = Ctx
context!: React.ContextType<typeof Ctx>
render () {
return <>My context's value: {this.context}</>;
}
}

Methods

  • Called when the component may be receiving new props. React may call this even if props have not changed, so be sure to compare new and existing props if you only want to handle changes.

    Calling Component#setState generally does not trigger this method.

    This method will not stop working in React 17.

    Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.

    Parameters

    • nextProps: Readonly<IErrorBoundaryProps>
    • nextContext: any

    Returns void

  • Handles error caught during rendering in React components.

    Parameters

    • error: any

      The error object that was caught.

    • errorInfo: any

      Additional information about the error.

    Returns void

    [ComponentName]

  • Listen for error cancelation

    Returns void

    componentDidMount

    Component

  • Listens for updates to the component and handles error state.

    Returns void

    componentDidUpdate

    Component

  • Clears the garbage

    Returns void

    componentWillUnmount

    Component

  • Parameters

    • Optionalcallback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Runs before React applies the result of render to the document, and returns an object to be given to componentDidUpdate. Useful for saving things such as scroll position before render causes changes to it.

    Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated lifecycle events from running.

    Parameters

    • prevProps: Readonly<IErrorBoundaryProps>
    • prevState: Readonly<IErrorBoundaryState>

    Returns any

  • A function that renders the children component. If there is an error in the state, it will return null. Otherwise, it will return the children component.

    Returns ReactNode

    The rendered component or null if there is an error in the state.

  • Type Parameters

    • K extends "hasError"

    Parameters

    • state:
          | null
          | IErrorBoundaryState
          | ((prevState: Readonly<IErrorBoundaryState>, props: Readonly<IErrorBoundaryProps>) => null | IErrorBoundaryState | Pick<IErrorBoundaryState, K>)
          | Pick<IErrorBoundaryState, K>
    • Optionalcallback: (() => void)
        • (): void
        • Returns void

    Returns void

  • Called to determine whether the change in props and state should trigger a re-render.

    Component always returns true. PureComponent implements a shallow comparison on props and state and returns true if any props or states have changed.

    If false is returned, Component#render, componentWillUpdate and componentDidUpdate will not be called.

    Parameters

    • nextProps: Readonly<IErrorBoundaryProps>
    • nextState: Readonly<IErrorBoundaryState>
    • nextContext: any

    Returns boolean

  • Returns an object that represents the new state for a component when an error is thrown during rendering. This is a static method that can be implemented in a React class component.

    Returns {
        hasError: boolean;
    }

    The new state object with the 'hasError' property set to true.

    • hasError: boolean