Avoid using the initial state variable in setState

문서 > 코드 분석 > Static Analysis Rules > Avoid using the initial state variable in setState

이 페이지는 아직 한국어로 제공되지 않으며 번역 작업 중입니다. 번역에 관한 질문이나 의견이 있으시면 언제든지 저희에게 연락해 주십시오.

Metadata

ID: tsx-react/setstate-same-var

Language: TypeScript

Severity: Warning

Category: Error Prone

Description

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.

Non-Compliant Code Examples

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>
    );
};

Compliant Code Examples

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>
    );
};