Error:

react-dom.development.js:88 Warning: 
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.
    in ReportMng
    in Unknown (created by Context.Consumer)
Copy the code

Translation:

Unable to perform React status updates on uninstalled components. This is a no-OP, but it indicates a memory leak in the application. To fix, unsubscribe all subscriptions and asynchronous tasks in the useEffect cleanup function.Copy the code

Look at the source code for the error location:

The reason:

The component is uninstalled but still in the render state (e.g. SetState, useState), which occurs when writing a timer. Other cases can occur as well, as long as the component is uninstalled but still updating data timing

The solution is as follows:

This error does not affect actual use and is very simple to fix.

First, let’s talk about the solution of hook function components:

The first timer case:

const [update, setUpdate] = useState(1); UseEffect (() => {const creatInt = setInterval(() => {update setUpdate(c => c + 1); }, 2000); return () => { clearInterval(creatInt); // (key) clear timer}; } []);Copy the code

The second useSate case:

useEffect(() => { let isUnmount = false; // insert isUnmount const fetchDetail = async () => {const res = await getDetail(detailId); if (res.code === 0 && ! IsUnmount) {// Add judgment isUnmount to update the data rendering component setDetail(res.data); }}; fetchDetail(); return () => isUnmount = true; // return isUnmount}, [detail]);Copy the code

Change to this and the warning disappears

// const mountedRef = useRef(true); // useEffect cleanup function to cancel all subscriptions and asynchronous tasks let isUnmount = false; IsUnmount useEffect(() => {// if (! permission? .writeAuth) { // window.location.href = `/admin/forbidden? url=${encodeURI(window.location.href)}`; // } getCityList(); return () => isUnmount = true; // isUnmount // mountedref. current = false; } []); Const getCityList = useCallback(async (params: GetAuthCityListResponse) => { const res = await getAuthCityList(params); if (res? .code === 0 && ! isUnmount) { // if (! mountedRef.current) return null; setCityIdOptions(res? .data); console.log('11111', ! isNotCreate); if (! isNotCreate) { getAppealDetails(); }}} []); Const getAppealDetails = useCallback(async () => {}, []); const getAppealDetails = useCallback(async () => {}, []);Copy the code

Description:

UseEffect is equivalent to the three life cycles of a class component, where return ()=>{} is equivalent to componentWillUnMount

ComponentWillUnMount class: same principle as hook: Set a value true, false in componentWillUnMount to determine whether to render a component

Stackoverflow.com/questions/5…

Thank you for reading

❤️ follow + like + favorites + comments + forward ❤️**, original is not easy, encourage the author to create better articles

Small round face, a focus on the web front – end foundation, engineering, interview front – end public number