리액트 후크 useEffect는 영속적으로 실행/무한 루프

리액트 후크 useEffect는 영속적으로 실행/무한 루프

새로운 리액트 훅을 시험해 보겠습니다.useEffectAPI는 무한 루프에서 영원히 가동될 것 같습니다!콜백만 입력해 주세요.useEffect한 번 달리다.참조용 코드는 다음과 같습니다.

"실행 코드 조각"을 클릭하여 "실행 useEffect" 문자열이 콘솔에 무한히 인쇄되는지 확인합니다.

function Counter() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    console.log('Run useEffect');
    setCount(100);
  });

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

ReactDOM.render(<Counter />, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

이 일이 발생하는 이유는useEffect모든 렌더링 후에 트리거됩니다.이것은, 의 기동입니다.Counter()이 기능 구성요소의 경우 기능합니다.할 때setX에서 반환된 콜useState에 있어서useEffectReact는 해당 컴포넌트를 다시 렌더링합니다.useEffect다시 실행됩니다.이로 인해 무한 루프가 발생합니다.

Counter()→useEffect()→setCount()→Counter()→useEffect()→ ...(루프)

고객님의useEffect한 번만 실행, 빈 배열 전달[]아래 개정된 스니펫에서 볼 수 있듯이 두 번째 인수입니다.

두 번째 인수의 목적은 array 인수 중 하나의 값이 변경되었을 때 React에 통지하는 것입니다.

useEffect(() => {
  setCount(100);
}, [count]); // Only re-run the effect if count changes

어레이에는 임의의 수의 값을 입력할 수 있으며useEffect값이 변경되었을 때만 실행됩니다.빈 어레이를 전달함으로써 React에게 변경을 추적하지 말고 한 번만 실행하여 효과적으로 시뮬레이션을 수행하도록 지시합니다.componentDidMount.

function Counter() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    console.log('Run useEffect');
    setCount(100);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

ReactDOM.render(<Counter />, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

useEffect에 대한 자세한 내용은 이쪽.

언급URL : https://stackoverflow.com/questions/53243203/react-hook-useeffect-runs-continuously-forever-infinite-loop