[8주차/클레버] 워크북 제출합니다.

[kcleverp]

✅ 워크북 체크리스트

• 모든 핵심 키워드 정리를 마쳤나요?
• 핵심 키워드에 대해 완벽히 이해하셨나요?
• 이론 학습 이후 직접 실습을 해보는 시간을 가졌나요?
• 미션을 수행하셨나요?
• 미션을 기록하셨나요?

✅ 컨벤션 체크리스트

• 디렉토리 구조 컨벤션을 잘 지켰나요?
• pr 제목을 컨벤션에 맞게 작성하였나요?
• pr에 해당되는 이슈를 연결하였나요?(중요)
• 적절한 라벨을 설정하였나요?
• 파트장에게 code review를 요청하기 위해 reviewer를 등록하였나요?
• 닉네임/main 브랜치의 최신 상태를 반영하고 있는지 확인했나요?(매우 중요!)

📌 주안점

[kcleverp]

미션 3빠르게 마무리하겠습니다

[bukyung03]

현재 구조에서는 useEffect 내부에서 fetchNextPage()를 직접 호출하고 있는데 useThrottle의 비동기 타이머 주기와 리액트의 최신 렌더링 타이밍이 미세하게 어긋나면, 과거 주소의 함수를 참조하는 클로저 고임(Stale Closure) 현상이 일어나 무한 스크롤이 간혹 먹통이 될 위험이 있다고 합니다

최신 상태의 fetchNextPage를 볼 수 있도록 useRef 레퍼런스에 함수를 담아서 .current() 형태로 작성하면 어떨까요..?

const fetchNextPageRef = useRef(fetchNextPage);
fetchNextPageRef.current = fetchNextPage;

useEffect(() => {
if (throttledInView && hasNextPage && !isFetchingNextPage) {
fetchNextPageRef.current();
}
}, [throttledInView, hasNextPage, isFetchingNextPage]);