Firestore의 스냅샷에 사용하기에 적합한 React Hook 선택
<p>저는 React Native 앱에서 Firestore 스냅샷을 많이 사용합니다. 나는 또한 React Hooks를 사용했습니다. 코드는 다음과 같습니다. </p>
<pre class="brush:php;toolbar:false;">useEffect(() => {
someFirestoreAPICall().onSnapshot(스냅샷 => {
// 구성 요소가 처음 로드되면 로드된 모든 데이터를 상태에 추가합니다.
// Firestore의 데이터가 변경되면 이 콜백에서 업데이트를 받습니다.
// 그런 다음 현재 상태에 따라 UI를 업데이트합니다.
});;
}, []);</pre>
<p>처음에는 <code>useState</code> UI를 저장하고 업데이트하는 데 가장 좋은 방법이라고 생각했습니다. 그러나 빈 종속성 배열과 함께 제공되는 내 <code>useEffect</code> 설정에 따르면 스냅샷 콜백이 실행되고 새로운 변경 사항으로 현재 상태를 수정하려고 하면 현재 상태가 정의되지 않습니다. . 나는 이것이 폐쇄 때문이라고 생각합니다. 다음 코드와 함께 <code>useRef</code> 및 <code>forceUpdate()</code>를 사용하여 이 문제를 해결할 수 있었습니다.
<pre class="brush:php;toolbar:false;">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
)</pre>
<p>제 질문은 <code>useRef</code>와 <code>forceUpdate</code>를 <code>useState</code>와 다르게 올바르게 사용하고 있다는 것입니다. <code>useRef</code> 후크를 업데이트하고 애플리케이션 전체에서 <code>forceUpdate()</code>를 호출하는 것이 올바르지 않은 것 같습니다. <code>useState</code>를 사용하려고 할 때 종속성 배열에 상태 변수를 추가하려고 시도했지만 결과적으로 무한 루프가 발생했습니다. 스냅샷 기능을 한 번만 초기화하고 백엔드가 변경됨에 따라 구성 요소의 상태 저장 데이터가 시간이 지남에 따라 업데이트되기를 원합니다(onSnapshot 콜백에서 트리거됨). </p>
