React JS, was ist <React.StrictMode>?

Das ist ja standardmäßig in der index.js aber was bringt es genau ?
Wenn ich es nicht weglasse dann werden meine Funktionen innerhalb der Komponente doppelt aufgerufen die zwischen dem <React.StrictMode> sind.

Also kann ich es weglassen ?

App JS :

import {React,useEffect,useState} from 'react'
export default function App() {
useEffect(() => {
  // http://api.icndb.com/jokes/random
  const fetchJoke = async()=>(
    await fetch(`http://api.icndb.com/jokes/random`)
    .then(response => response.json())
    .then(data => console.log(data.value.joke))
  )
fetchJoke()
}, [])
  return (
    <div>App</div>
  )
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

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

Hab ja auch useEffect Hook benutzt damit es nur 1x beim laden ausgeführt werden soll.

Answer 1

[Kelec]

https://reactjs.org/docs/strict-mode.html

Steht eigentlich alles hier.

Answer 2

[Functional]

Wenn ich es nicht weglasse dann werden meine Funktionen innerhalb der Komponente  doppelt aufgerufen

Genau dafür ist der Strict Mode da. React Components, die im Strict Mode sind, werden zweimal gemounted. Somit werden auch die useEffect() Hooks zweimal aufgerufen. Dadurch sollen potentielle Bugs schneller auffallen.

Sehe jetzt in dem spezifischen Fall nicht wirklich ein Problem, das sich dadurch ergibt.

Woher ich das weiß: Berufserfahrung – Inhaber einer App-Agentur & 15+ Jahre Programmiererfahrung