useEffect 및 ReactStrictMode 사용: 성능 및 안정성을 위해 React 구성요소 최적화

Question

문제가 있습니다. 배열의 일부를 "loadedData"라는 새 배열에 로드하고 구성 요소가 매우 무거우므로 로드된 데이터만 표시하고 싶습니다.

그러나 처음 로드할 때 useEffect가 문제를 일으키는 것 같아서 많은 문제에 부딪혔습니다. 첫 번째 로드는 두 번 발생하고 첫 번째 데이터는 각 렌더링에 대해 한 번씩 배열로 푸시됩니다. "reactStrictMode"를 제거하면 예상대로 작동하지만 결과를 이해하지 못한 채 "속임수"를 사용하고 싶지 않습니다. 나보다 문제를 더 잘 이해하는 사람이 그 문제를 거기에 넣은 이유는..

isLoading 상태는 초기 로드 중 두 번째 실행을 방지할 수 없습니다. 이는 이 문제와 관련된 다른 스레드에서 받은 제안입니다.

첫 번째 useEffect가 isLoading 상태를 무시하는 이유와 이를 처리하는 방법을 아는 사람이 있습니까?

// 보이는 부분만 로드해 보세요. 더 이상 로드하지 마세요.
const [loadedData, setLoadedData] = useState([]);
const [isLoading, setIsLoading] = useState(false);

const addMoreData = 비동기 () =>
    if (loadedData.length >= data.length) return;

    const startIndex =loadedData.length;
    const PreferredLoadLength = 1;

    const endIndex = startIndex + PreferredLoadLength;

    const newData = data.slice(startIndex, endIndex);

    setLoadedData((prev) => [...prev, ...newData]);
};

// 데이터를 마운트하고 가져온 후 테이블이 아래쪽으로 스크롤되어 즉시 더 많은 데이터를 가져와야 하는지 확인합니다.
useEffect(() => {
    const { scrollHeight, scrollTop, clientHeight } = tableContainerRef.current;
    만약에 (
        scrollHeight == 클라이언트 높이 &&
        scrollTop == 0 &&
        로드된데이터.길이 <
    ) {
        const addNewDataFunction = async () =>
            if (isLoading) {
                반품;
            }
            setIsLoading(true);
            addMoreData()를 기다립니다.
            setIsLoading(false);
        };
        addNewDataFunction();
    }
    // eslint-disable-next-line 반응 후크/exhaustive-deps
}, [data.length, selectedData.length, isLoading]);

Answer 1

addMoreDatafunction

에서 이 줄을 간단히 변경할 수 있습니다. 으아악

for

으아악

두 번째 useEffect运行时组件尚未重新渲染，所以第一个组件所做的更改尚未反映出来，因此loadedData아직 업데이트되지 않았기 때문에 렌더링 시 현재 값을 기반으로 상태가 업데이트됩니다.

함수 형식을 사용하여 업데이트할 때 prev는 상태의 실시간 값이며, 개발 시 엄격 모드를 사용할 때 이 값이 발생하는 것이 일반적입니다.

마지막으로 isLoading을 제거하면 문제 해결에 도움이 되지 않습니다.

참고: 엄격 모드가 활성화된 경우 setState의 기능적 형식을 사용하는 것이 더 권장되지만 useEffect에서는 구성 요소가 마운트될 때 이 후크가 두 번 실행되므로 권장되지 않습니다.
또한 종속성 배열에 data.length 및 loadedData.length를 포함하면 해당 값 중 하나가 변경될 때마다 data.length和loadedData.length时，这将使useEffect가 실행됩니다.