React useEffect 정리: 사용 방법 및 시기
8736 단어 reactreactnativejavascript
다음과 같은 오류가 발생한 적이 있습니까?
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
메시지는 간단합니다. 마운트 해제되어 사용할 수 없게 된 후에도 구성 요소의 상태를 변경하려고 합니다.
이런 일이 발생할 수 있는 이유는 여러 가지가 있지만 가장 일반적인 이유는 websocket 구성 요소에 대한 구독을 취소하지 않았거나 비동기 작업이 완료되기 전에 마운트 해제되었기 때문입니다.
이 문제를 어떻게 해결할 수 있습니까?
useEffect 후크의 정리 기능.
useEffect 후크는 메서드 내에서 함수를 반환하는 경우 구성 요소가 연결 해제될 때 이 함수가 실행되도록 하는 방식으로 구축됩니다. 이는 불필요한 동작을 제거하거나 메모리 누수 문제를 방지하는 데 사용할 수 있기 때문에 매우 유용합니다.
따라서 구독을 정리하려는 경우 코드는 다음과 같습니다.
useEffect(() => {
API.subscribe()
return function cleanup() {
API.unsubscribe()
}
})
마운트되지 않은 구성 요소의 상태를 업데이트하지 마십시오.
일반적인 구현 중 하나는 비동기 함수가 완료되면 구성 요소 상태를 업데이트하는 것입니다. 그러나 완료 후 구성 요소가 마운트 해제되면 어떻게 됩니까? 우리가 그것을 제어하지 않으면 어쨌든 상태를 설정하려고 시도할 것입니다.
실제 시나리오에서 React Native에서 사용자가 프로세스가 끝나기 전에 화면을 떠날 수 있는 일이 일어났습니다.
다음 예제에는 일부 작업을 수행하는 비동기 함수가 있으며 이 함수가 실행되는 동안 "로딩"메시지를 렌더링하려고 합니다. 함수가 완료되면 "로드 중"상태를 변경하고 다른 메시지를 렌더링합니다.
function Example(props) {
const [loading, setloading] = useState(true)
useEffect(() => {
fetchAPI.then(() => {
setloading(false)
})
}, [])
return <div>{loading ? <p>loading...</p> : <p>Fetched!!</p>}</div>
}
그러나 구성 요소를 종료하고 fetchAPI가 종료되고 로드 상태를 설정하면 처음에 언급한 오류가 표시됩니다. 따라서 fetchAPI가 완료될 때 구성 요소가 여전히 마운트되어 있는지 확인해야 합니다.
function Example(props) {
const [loading, setloading] = useState(true)
useEffect(() => {
let mounted = true
fetchAPI.then(() => {
if (mounted) {
setloading(false)
}
})
return function cleanup() {
mounted = false
}
}, [])
return <div>{loading ? <p>loading...</p> : <p>Fetched!!</p>}</div>
}
이렇게 하면 구성 요소가 여전히 마운트되어 있는지 확인할 수 있습니다. 마운트를 해제하면 false로 변경되는 변수를 추가하기만 하면 됩니다.
추가: Axios 요청 취소
Axios는 요청이 끝나기 전에 완료할 수 있는 cancellation option과 함께 제공됩니다. 정리 기능 외에도 메모리 누수를 방지하는 데 유용합니다.
useEffect(() => {
const source = axios.CancelToken.source()
const fetchUsers = async () => {
try {
await Axios.get('/users', {
cancelToken: source.token,
})
// ...
} catch (error) {
if (Axios.isCancel(error)) {
} else {
throw error
}
}
}
fetchData()
return () => {
source.cancel()
}
}, [])
결론
useEffect 후크에서 cleanup 함수의 다른 용도가 많이 있지만 이 기능을 사용하면 언제 어떻게 사용해야 하는지에 대한 더 나은 관점을 얻을 수 있기를 바랍니다.
의견이나 제안을 추가해 주시면 감사하겠습니다.
Reference
이 문제에 관하여(React useEffect 정리: 사용 방법 및 시기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/otamnitram/react-useeffect-cleanup-how-and-when-to-use-it-2hbm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)