당신이 몰랐을 수도 있는 useState 성능 팁

내부에 useState가 있는 반응 구성 요소가 있다고 가정해 보겠습니다.

const expensiveCalculation = () => {
  // ...
}

export default function AboutPage() {
  const [state, setState] = useState(expensiveCalculation())

    return (
      // ...
    );
  }

값비싼 계산 함수의 결과로 상태를 시작합니다.
구성 요소가 다시 렌더링될 때마다 useState의 초기 값으로 결과만 필요하더라도 availableCalculation 함수가 실행됩니다. 함수의 결과는 사용되지 않습니다.

다시 렌더링하는 동안 비용이 많이 드는 계산을 피하려면 함수를 호출하지 않고 함수 자체를 전달하세요. React는 모든 렌더링이 아닌 마운트 시 함수 자체를 호출할 만큼 똑똑합니다.

const expensiveCalculation = () => {
  // ...
}

export default function AboutPage() {
  const [state, setState] = useState(expensiveCalculation)

    return (
      // ...
    );
  }

위 내용은 당신이 몰랐을 수도 있는 useState 성능 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!