Rules Hub
Coding Rules Library
Always wrap React root in StrictMode
Wrap the application root in React.StrictMode to catch potential problems, unsafe lifecycles, and impure renderers during development.
Bad example
| 1 | import { createRoot } from 'react-dom/client'; |
| 2 | import App from './App'; |
| 3 |
|
| 4 | const container = document.getElementById('root'); |
| 5 | if (container) { |
| 6 | const root = createRoot(container); |
| 7 | // Missing StrictMode wrapper |
| 8 | root.render(<App />); |
| 9 | } |
Explanation (EN)
Mounting the application without StrictMode hides potential issues like impure side effects, deprecated lifecycle usage, or unsafe contexts, making debugging harder.
Objašnjenje (HR)
Mountanje aplikacije bez StrictMode-a skriva potencijalne probleme poput nečistih side-effectova, korištenja zastarjelih lifecycle metoda ili nesigurnih konteksta, što otežava debugiranje.
Good example
| 1 | import { createRoot } from 'react-dom/client'; |
| 2 | import React from 'react'; |
| 3 | import App from './App'; |
| 4 |
|
| 5 | const container = document.getElementById('root'); |
| 6 | if (container) { |
| 7 | const root = createRoot(container); |
| 8 | // Correctly wrapped in StrictMode for better dev experience |
| 9 | root.render( |
| 10 | <React.StrictMode> |
| 11 | <App /> |
| 12 | </React.StrictMode> |
| 13 | ); |
| 14 | } |
Explanation (EN)
StrictMode intentionally double-invokes render functions in development to expose side effects and warns about legacy APIs, ensuring cleaner and more future-proof code.
Objašnjenje (HR)
StrictMode namjerno dvaput poziva render funkcije u developmentu kako bi razotkrio side-effectove i upozorava na zastarjele API-je, osiguravajući čišći i dugoročno održiviji kod.
Notes (EN)
StrictMode checks run only in development mode; they do not impact production performance.
Bilješke (HR)
Provjere StrictMode-a se izvršavaju samo u development okruženju; ne utječu na performanse u produkciji.