Avoid using the initial state variable in setState
Cette page n'est pas encore disponible en français, sa traduction est en cours.
Si vous avez des questions ou des retours sur notre projet de traduction actuel,
n'hésitez pas à nous contacter.
ID: jsx-react/setstate-same-var
Language: JavaScript
Severity: Warning
Category: Error Prone
This rule in React prevents the state from never re-rending. React only re-renders a component when the value passed in is different from the current value.
If you pass in the state variable to the state setter function, the component is never re-rendered when this is called, which leads to subtle UI bugs that might be hard to track down. Ensure that you do not use the setter function with the state variable itself, and use another variable instead.
import { useState } from "react";
function SetLimit() {
const [limit, setLimit] = useState(500);
return (
<section>
<h1>Select a limit</h1>
<button onClick={() => setLimit(1000)}></button>{}
<button onClick={() => setLimit(limit)}></button>{}
</section>
);
};
import { useState } from "react";
function SetLimit() {
const [limit, setLimit] = useState(500);
return (
<section>
<h1>Select a limit</h1>
<button onClick={() => setLimit(1000)}></button>{}
<button onClick={() => setLimit(500)}></button>{}
</section>
);
};
