useEffect 종속성 배열에 함수를 전달하면 무한 루프가 발생합니다.

useEffect 종속성 배열에 함수를 전달하면 무한 루프가 발생합니다.

함수식을 useEffect 의존관계 배열에 전달하면 무한 루프가 생성되는 이유는 무엇입니까?함수식은 구성 요소 상태를 변경하지 않고 참조할 뿐입니다.

// component has one prop called => sections

const markup = (count) => {
    const stringCountCorrection = count + 1;
    return (
        // Some markup that references the sections prop
    );
};

// Creates infinite loop
useEffect(() => {
    if (sections.length) {
        const sectionsWithMarkup = sections.map((section, index)=> markup(index));
        setSectionBlocks(blocks => [...blocks, ...sectionsWithMarkup]);
    } else {
        setSectionBlocks(blocks => []);
    }
}, [sections, markup]);

마크업 상태가 변경되면 무한 루프가 생성되는 이유를 알 수 있지만 단순히 섹션의 프로포트를 참조하는 것은 아닙니다.

그래서 나는 이 질문에 대한 코드와 관련된 답을 찾고 있지 않다.가능하다면 왜 이런 일이 일어나는지 자세한 설명을 듣고 싶습니다.

저는 그 이유를 단순히 답을 찾거나 문제를 해결할 수 있는 올바른 방법을 찾는 것보다 더 관심이 있습니다.

useEffect 외부에서 선언된 useEffect 의존관계 배열에서 함수를 전달하면 해당 함수에서 상태와 소품이 변경되지 않는데 왜 재렌더가 발생합니까?

문제는 렌더링 사이클마다markup가 재정의되었습니다.React는 얕은 개체 비교를 사용하여 값이 업데이트되었는지 여부를 확인합니다.각 렌더링 사이클markup참조가 다릅니다.사용할 수 있습니다.useCallback기능을 메모하기 때문에 참조는 안정적입니다.리액트 훅 규칙이 사용 중인 린터에 대해 활성화되어 있습니까?이 경우 플래그를 설정하고 이유를 설명한 후 참조 문제를 해결하기 위해 이 제안을 할 수 있습니다.

const markup = useCallback(
  (count) => {
    const stringCountCorrection = count + 1;
    return (
      // Some markup that references the sections prop
    );
  },
  [count, /* and any other dependencies the react linter suggests */]
);

// No infinite looping, markup reference is stable/memoized
useEffect(() => {
    if (sections.length) {
        const sectionsWithMarkup = sections.map((section, index)=> markup(index));
        setSectionBlocks(blocks => [...blocks, ...sectionsWithMarkup]);
    } else {
        setSectionBlocks(blocks => []);
    }
}, [sections, markup]);

함수식을 통과하면 무한 루프가 생성되는 이유는 무엇입니까?

'무한 루프'는 컴포넌트가 반복적으로 재렌더되는 것입니다.markup함수는 컴포넌트가 렌더링될 때마다 새로운 함수 참조(메모리의 포인터)입니다.useEffect종속성이기 때문에 재검출을 트리거합니다.

솔루션은 @drew-reese가 지적한 바와 같이useCallback훅을 사용하여markup기능.

언급URL : https://stackoverflow.com/questions/62601538/passing-a-function-in-the-useeffect-dependency-array-causes-infinite-loop