React Strict Mode Vs Error Boundary? Complete Example Guide

React Strict Mode vs Error Boundary

Both tools improve React app quality but serve different purposes:

• Strict Mode: Development tool to highlight potential problems like unsafe lifecycle methods and side effects.
• Error Boundary: Catches runtime errors in components and displays a fallback UI.

---

Strict Mode Example

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

✅ Detects potential issues in development mode, no UI impact.

---

Error Boundary Example

import React from "react";

class ErrorBoundary extends React.Component {
  state = { hasError: false };

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

  render() {
    if (this.state.hasError) return <h2>Something went wrong.</h2>;
    return this.props.children;
  }
}

function Buggy() {
  throw new Error("Crash!");
}

function App() {
  return (
    <ErrorBoundary>
      <Buggy />
    </ErrorBoundary>
  );
}

✅ Prevents app crash by showing fallback UI.

---

Key Differences

Feature	Strict Mode	Error Boundary
Purpose	Detect potential issues	Catch runtime errors
Mode	Development only	Runtime
UI Impact	None	Shows fallback UI
Use Case	Debugging & future-proofing	Error handling in production

---

Conclusion

Strict Mode helps identify issues early, while Error Boundaries handle errors gracefully, improving app stability and user experience.

---

Citations

https://savanka.com/category/learn/react/
https://www.w3schools.com/REACT/DEFAULT.ASP