React snippets

ErrorBoundary

import { Component, ReactNode } from "react";
import ErrorComponnet from "@/components/ErrorComponnet";

export class ErrorBoundary extends Component<
  { children: ReactNode },
  { hasError: boolean }
> {
  constructor(props: { children: ReactNode }) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(_error: unknown) {
    return { hasError: true };
  }

  override componentDidCatch(error: unknown, info: unknown) {
    if (
      error instanceof Error &&
      error.message.includes("Failed to fetch dynamically imported module")
    ) {
      // be carefull with multi-page forms
      window.location.reload();
      return;
    }
    console.log({ error, info });
  }

  override render() {
    if (this.state.hasError) {
      return <ErrorComponnet />;
    }

    return this.props.children;
  }
}

See also: react-error-boundary ↗

Lazy loading

const Comp1 = lazy(() => import("@/components/Comp1"));
const Comp2 = lazy(() => import("@/components/Comp2"));

export default function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<Loader />}>
        <Comp1 />
        <Comp2 />
      </Suspense>
    </ErrorBoundary>
  );
}