나는 Dan Abramov (React 핵심 관리자 중 한 명) 대답을 여기 에서 볼 것을 제안합니다 .
필요 이상으로 복잡하게 만들고 있다고 생각합니다.
function Example() {
const [data, dataSet] = useState<any>(null)
useEffect(() => {
async function fetchMyAPI() {
let response = await fetch('api/data')
response = await response.json()
dataSet(response)
}
fetchMyAPI()
}, [])
return <div>{JSON.stringify(data)}</div>
}
장기적으로는이 패턴이 경쟁 조건을 조장하기 때문에 권장하지 않을 것입니다. 예를 들어, 호출 시작과 종료 사이에 어떤 일이 발생할 수 있으며 새로운 소품을 얻을 수 있습니다. 대신 데이터 가져 오기를 위해 Suspense를 권장합니다.
const response = MyAPIResource.read();
효과가 없습니다. 그러나 그 동안 비동기 항목을 별도의 함수로 이동하여 호출 할 수 있습니다.
여기에서 실험적 서스펜스 에 대해 자세히 알아볼 수 있습니다 .
eslint와 함께 외부 기능을 사용하려는 경우.
function OutsideUsageExample() {
const [data, dataSet] = useState<any>(null)
const fetchMyAPI = useCallback(async () => {
let response = await fetch('api/data')
response = await response.json()
dataSet(response)
}, [])
useEffect(() => {
fetchMyAPI()
}, [fetchMyAPI])
return (
<div>
<div>data: {JSON.stringify(data)}</div>
<div>
<button onClick={fetchMyAPI}>manual fetch</button>
</div>
</div>
)
}
useCallback 사용 useCallback . 샌드 박스 .
import React, { useState, useEffect, useCallback } from "react";
export default function App() {
const [counter, setCounter] = useState(1);
// if counter is changed, than fn will be updated with new counter value
const fn = useCallback(() => {
setCounter(counter + 1);
}, [counter]);
// if counter is changed, than fn will not be updated and counter will be always 1 inside fn
/*const fnBad = useCallback(() => {
setCounter(counter + 1);
}, []);*/
// if fn or counter is changed, than useEffect will rerun
useEffect(() => {
if (!(counter % 2)) return; // this will stop the loop if counter is not even
fn();
}, [fn, counter]);
// this will be infinite loop because fn is always changing with new counter value
/*useEffect(() => {
fn();
}, [fn]);*/
return (
<div>
<div>Counter is {counter}</div>
<button onClick={fn}>add +1 count</button>
</div>
);
}
useEffect(() => { let unmounted = false promise.then(res => { if (!unmounted) { setState(...) } }) return () => { unmounted = true } }, [])