React’s useState hook setter function should not be called directly in the body of a component, otherwise it would produce an infinite render loop.
This can happen by mistake. Most commonly, the setter function is called from an event handler.
Noncompliant Code Example
import { useState } from "react";
function ShowLanguage() {
const [language, setLanguage] = useState("fr-FR");
// Makes an infinite loop
setLanguage(navigator.language);
return (
<section>
<h1>Your language is {language}!</h1>
<button onClick={() => setLanguage("fr-FR")}>Je préfère le Français</button>
</section>
);
}
Compliant Solution
import { useState } from "react";
function ShowLanguage() {
const [language, setLanguage] = useState(navigator.language);
return (
<section>
<h1>Your language is {language}!</h1>
<button onClick={() => setLanguage("fr-FR")}>Je préfère le Français</button>
</section>
);
}
See
