score:1
Accepted answer
you can return timerid
while creating timeout. and on unmount
u can clean using return function
of useeffect
.
unmount:
useeffect(() => {
const timerid = createcontent();
handlemobilecontainerview();
return () => {
cleartimeout(timerid);
};
}, []);
return timerid:
const delaycontent = (content) => {
let timerid;
if (firsttime) {
timerid = settimeout(() => {
setcurrentcontent(content);
setfirsttime(false);
}, 200);
} else if (!firsttime) {
timerid = settimeout(() => {
setcurrentcontent(content);
}, 450);
}
return timerid;
};
// all code:
function a() {
useeffect(() => {
const timerid = createcontent();
handlemobilecontainerview();
return () => {
cleartimeout(timerid);
};
}, []);
const createcontent = () => {
if (contentcompshowstatus) {
for (let key in btnstatus) {
if (btnstatus.hasownproperty(key)) {
if (btnstatus[key] === true) {
if (key === "aboutbtn") {
return delaycontent("about-contents");
} else if (key === "skillsbtn") {
return delaycontent("skills-contents");
} else if (key === "projectsbtn") {
return delaycontent("projects-contents");
}
}
}
}
}
};
const delaycontent = (content) => {
let timerid;
if (firsttime) {
timerid = settimeout(() => {
setcurrentcontent(content);
setfirsttime(false);
}, 200);
} else if (!firsttime) {
timerid = settimeout(() => {
setcurrentcontent(content);
}, 450);
}
return timerid;
};
}
score:1
you can use useeffect to return a function which should do the job of cleaning up of the settimouts and setintervals. for eg,
useeffect(() => {
const timer = settimeout(somefunc, 100);
return () => cleartimeout(timer);
});
to cleanup settimouts, use cleartimeout and clearinterval for setinterval. documentation
as far as your code is concerned,
useeffect(() => {
const timers = createcontent();
handlemobilecontainerview();
return () => timers.foreach(timer => window.cleartimeout(timer));
});
const createcontent = () => {
let timers = [];
if (contentcompshowstatus) {
for (let key in btnstatus) {
if (btnstatus.hasownproperty(key)) {
if (btnstatus[key] === true) {
if (key === 'aboutbtn') {
timers.push(delaycontent('about-contents'));
} else if (key === 'skillsbtn') {
timers.push(delaycontent('skills-contents'));
} else if (key === 'projectsbtn') {
timers.push(delaycontent('projects-contents'));
}
}
}
}
}
return timers;
};
const delaycontent = (content) => {
let timer;
if (firsttime) {
timer = settimeout(() => {
setcurrentcontent(content);
setfirsttime(false);
}, 200);
} else if (!firsttime) {
timer = settimeout(() => {
setcurrentcontent(content);
}, 450);
}
return timer;
};
Source: stackoverflow.com
Related Query
- React Hooks setTimeout and clearTimeout
- React setTimeout and clearTimeout
- setTimeout and clearTimeout in React
- setTimeout and clearTimeout in reactJS
- React function component setTimeout - Multiple render calls and rerenders (recommended approach) (fires multiple times)
- React setTimeout and setState inside useEffect
- loop through an array and show single item at a time with dynamic time duration like setTimeout or SetInterval in react js
- Using setTimeout with React and Redux
- blinking text with React using state and setTimeOut
- Enzyme and jest testing a react app that updates state after setTimeout
- Updating <canvas/> with React and setTimeout
- How to fetch a data without using useffect or setTimeout and add loader in react hooks
- Start a setTimeout in componentDidMount and end it in componentWillUnmount in React
- Use setInterval and recurcive setTimeout in SPA React application without memory leaks
- How do I declare and reassign a variable in React Class Component to store a setTimeout reference?
- What is the difference between React Native and React?
- What's the difference between "super()" and "super(props)" in React when using es6 classes?
- TypeScript and React - children type?
- How to compare oldValues and newValues on React Hooks useEffect?
- React : difference between <Route exact path="/" /> and <Route path="/" />
- Concatenating variables and strings in React
- What are React controlled components and uncontrolled components?
- React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
- React hooks - right way to clear timeouts and intervals
- How to detect Esc Key Press in React and how to handle it
- Difference between component and container in react redux
- How to import and export components using React + ES6 + webpack?
- React - animate mount and unmount of a single component
- How to render react components by using map and join?
- When should you use render and shallow in Enzyme / React tests?
More Query from same tag
- How to use a dispatch (react-redux) into class Component
- Cannot read property 'array' of undefined
- Clickable rows in Semantic UI table returns errors
- React Router ERR_TOO_MANY_REDIRECTS
- 'delTodo' is not defined. React (line 51)
- Deleting item from state array in react
- Importing react with webpack Error: Cannot resolve module 'react'
- Maximum update depth exceeded error, React-image-crop
- Prevent refershing of Child Component in react hooks
- How to reset other values when one is introduced in React with react-hook-form
- Render JSX-element conditionally based on whether source object has deeply nested properties with certain values
- React function executes continuously and state keeps refreshing
- Overriding Card titleStyle and subtitleStyle not working in material-ui
- How to POST form-data from React App to the backend using express?
- GitHub pages custom domain 404
- Filtering an array in React
- modifying required for form elements
- Resolve firebase authentication (google signIn) deploy error on netlify with gatsby
- Passing data to Carousel component
- My first react app: a calculator using codepen
- Can't use if statement inside const declaration, but ternary operator works
- React Virtualized: Collection with cells that have the same fixed height but different widths
- Getting error in render function (reactjs)?
- Reset Redux state to undefined or initial state except one state
- Trying to load content with useEffect and context
- How do I properly use formik reset form?
- React can't render, got Unterminated JSX contents error
- React State how to add elements (not single element) immutably to a javascript Set (not Array)
- React and Axios : Axios Can't Access Java/SpringBoot REST Backend Service Because of CORS Policy
- I cant use java script on flutter