title: How to properly type a React ErrorBoundary class component in Typescript?
body: <p>Here is my current attempt on how to properly type a React <code>ErrorBoundary</code> class component in Typescript:</p>
  <pre><code>import React from &quot;react&quot;;
  import ErrorPage from &quot;./ErrorPage&quot;;
  import type { Store } from &quot;redux&quot;;   // I'M PASSING THE REDUX STORE AS A CUSTOM PROP
  
  interface Props {
    store: Store         // THIS IS A CUSTOM PROP THAT I'M PASSING
  }
  
  interface State {      // IS THIS THE CORRECT TYPE FOR THE state ?
    hasError: boolean
  }
  
  class ErrorBoundary extends React.Component&lt;Props,State&gt; {
    
    constructor(props: Props) {
      super(props);
      this.state = { hasError: false };
    }
  
    static getDerivedStateFromError(error): State {
      // Update state so the next render will show the fallback UI.
      return { hasError: true };
    }
  
    componentDidCatch(error, errorInfo: React.ErrorInfo): void {
      // You can also log the error to an error reporting service
      // logErrorToMyService(error, errorInfo);
      console.log(&quot;error: &quot; + error);
      console.log(&quot;errorInfo: &quot; + JSON.stringify(errorInfo));
      console.log(&quot;componentStack: &quot; + errorInfo.componentStack);
    }
  
    render(): React.ReactNode {
      if (this.state.hasError) {
        // You can render any custom fallback UI
        return(
          &lt;ErrorPage
            message={&quot;Something went wrong...&quot;}
          /&gt;
        );
      }
  
      return this.props.children;
    }
  }
  
  export default ErrorBoundary;
  </code></pre>
  <p>This question is about the types for this <code>ErrorBoundary</code> class component. I'm breaking it into parts to make it easier.</p>
  <hr />
  <p><strong>PART A: Types for props and state</strong></p>
  <p>Is what I'm doing right?</p>
  <pre><code>interface Props {
    store: Store         // THIS IS A CUSTOM PROP THAT I'M PASSING
  }
  
  interface State {      // IS THIS THE CORRECT TYPE FOR THE state ?
    hasError: boolean
  }
  
  class ErrorBoundary extends React.Component&lt;Props,State&gt; {}
  </code></pre>
  <hr />
  <p><strong>PART B: getDerivedStateFromError(error)</strong></p>
  <p>What type should I choose for the <code>error</code> parameter? The return type should be the <code>State</code> type, right?</p>
  <pre><code>static getDerivedStateFromError(error): State {
      // Update state so the next render will show the fallback UI.
      return { hasError: true };
    }
  </code></pre>
  <hr />
  <p><strong>PART C: componentDidCatch(error, errorInfo: React.React.ErrorInfo)</strong></p>
  <p>What type should I choose for the <code>error</code> parameter? For the <code>errorInfo</code>, React does have a <code>ErrorInfo</code> type that seems to be correct. Is it? The return type should be <code>void</code>, correct?</p>
  <pre><code>componentDidCatch(error, errorInfo: React.ErrorInfo): void {
      console.log(&quot;error: &quot; + error);
      console.log(&quot;errorInfo: &quot; + JSON.stringify(errorInfo));
      console.log(&quot;componentStack: &quot; + errorInfo.componentStack);
  }
  </code></pre>
  <hr />
  <p><strong>PART D: the render() method</strong></p>
  <p>Should the return type be <code>ReactNode</code> ?</p>
  <pre><code>render(): React.ReactNode {
      if (this.state.hasError) {
        // You can render any custom fallback UI
        return(
          &lt;ErrorPage
            message={&quot;Something went wrong...&quot;}
          /&gt;
        );
      }
  
      return this.props.children;
    }
  </code></pre>