Firestore의 스냅샷에 사용하기에 적합한 React Hook 선택

Question

저는 React Native 앱에서 Firestore 스냅샷을 많이 사용합니다. 나는 또한 React Hooks를 사용했습니다. 코드는 다음과 같습니다.

useEffect(() => {
    someFirestoreAPICall().onSnapshot(스냅샷 => {

        // 구성 요소가 처음 로드되면 로드된 모든 데이터를 상태에 추가합니다.
        // Firestore의 데이터가 변경되면 이 콜백에서 업데이트를 받습니다.
        // 그런 다음 현재 상태에 따라 UI를 업데이트합니다.

    });;
}, []);

처음에는 useState UI를 저장하고 업데이트하는 데 가장 좋은 방법이라고 생각했습니다. 그러나 빈 종속성 배열과 함께 제공되는 내 useEffect 설정에 따르면 스냅샷 콜백이 실행되고 새로운 변경 사항으로 현재 상태를 수정하려고 하면 현재 상태가 정의되지 않습니다. . 나는 이것이 폐쇄 때문이라고 생각합니다. 다음 코드와 함께 useRef 및 forceUpdate()를 사용하여 이 문제를 해결할 수 있었습니다.

const dataRef = useRef(initialData);

const [, updateState] = React.useState();
const forceUpdate = useCallback(() => updateState({}), []);

useEffect(() => {
    someFirestoreAPICall().onSnapshot(스냅샷 => {

       //스냅샷 데이터가 추가된 경우
       dataRef.current.push(새 데이터)
       강제 업데이트()

       //스냅샷 데이터가 업데이트된 경우
       dataRef.current.find(e => 일부 조건) = 업데이트된 데이터
       강제 업데이트()

    });;
}, []);

반품(
// dataRef.current를 사용하는 JSX
)

제 질문은 useRef와 forceUpdate를 useState와 다르게 올바르게 사용하고 있다는 것입니다. useRef 후크를 업데이트하고 애플리케이션 전체에서 forceUpdate()를 호출하는 것이 올바르지 않은 것 같습니다. useState를 사용하려고 할 때 종속성 배열에 상태 변수를 추가하려고 시도했지만 결과적으로 무한 루프가 발생했습니다. 스냅샷 기능을 한 번만 초기화하고 백엔드가 변경됨에 따라 구성 요소의 상태 저장 데이터가 시간이 지남에 따라 업데이트되기를 원합니다(onSnapshot 콜백에서 트리거됨).

Answer 1

useEffect와 useState를 결합하면 더 좋습니다. useEffect는 리스너 설정 및 비활성화를 담당하고, useState는 필요한 데이터만 담당합니다.

으아악

그런 다음 애플리케이션의 useState 후크에서 "데이터"를 직접 참조할 수 있습니다.

Answer 2

간단한 useEffect가 제게는 효과가 있었습니다. 도우미 함수나 그 밖의 어떤 것도 만들 필요가 없습니다.

으아악

간단한 useEffect가 저에게 효과적입니다. 도우미 기능이나 그와 유사한 것을 만들 필요가 없습니다.

으아악