score:3
check the next example, refer to setstate
in react docs.
export default function simplesnackbar() {
const classes = usestyles();
let [open, setopen] = react.usestate(false);
let [, setcounter] = react.usestate(0);
// save reference for clearing the interval
// in your case you firing an interval on every click
const lastinterval = useref();
// side effect on `open` change.
useeffect(() => {
if (lastinterval.current) clearinterval(lastinterval.current);
if (open) {
lastinterval.current = setinterval(() => {
// functional setstate
setcounter(prevcountervalue => {
console.log(prevcountervalue);
return prevcountervalue + 1;
});
}, 1000);
}
}, [open]);
function handleclick() {
setopen(true);
}
function handleclose(event, reason) {
if (reason === 'clickaway') {
return;
}
setopen(false);
}
...
}
Source: stackoverflow.com
Related Query
- Can't read latest state variable in setInterval (Hooks)
- React hooks state variable not updating after rerender
- React hooks state not using latest
- how to put a file in state variable with react hooks
- cant update context state when using hooks with a complex object to set providers value
- React hooks: How to read & update state in hooks without infinite loops with react-hooks/exhaustive-deps rule
- Function not pointing to the updated value of state variable using hooks
- Update state when imported variable changes using react hooks
- change state with hooks returns Cannot read property 'filter' of undefined
- React Hooks state not updating variable in view
- React.js Read User Info from AWS and set variable state
- How to use SetInterval to change this State variable in a function?
- Tmp array not properly added to state variable - React - Hooks
- Passing a function as a callback to a React state created with hooks did not reflect new value of variable
- Read a file as base 64 to store it into a state variable
- Using state variable in function, cannot read property x of undefined (Functional React)
- React Hooks state variable not updated during setTimeout function
- React hooks loses updated value of state variable inside cleanup function of useEffect
- React Hooks - Set State variable from Promise in another function
- React hooks state is not the latest when is used from a non-react callback
- I cant get my state to update using hooks
- Get the selected seats array into the state variable React Hooks
- Cant get my checkbox value in a variable using state in react
- In React components implemented with hooks, how can the latest component state values be read from within setInterval?
- Read state from React hooks
- How to pass React state variable into setInterval function
- Can't read state variable from inside React-Table Column Definition (React.useMemo)
- How do I assign setInterval to variable and clear it in React + Hooks
- Not getting added new item in exists state list variable in reactJS hooks
- Hooks setter not setting state with object variable
More Query from same tag
- Fetching methods depends on each other
- ReactJS: run function to spawn elements from different pages without interaction
- Import node module to typescript/systemjs
- replace not working in reactjs
- Check if an element is in the viewport but with mapped refs - ReactJS
- Is it possible to install React.js without node.js/npm on Windows enviroment
- Axios delete and put requests - 404 error
- React router CSS for all routes
- Redux store is updated but view is not
- How to hide updated state from the URL
- Best way to handle similar components in ReactJS?
- Material-table TypeError: Cannot add property tableData, object is not extensible
- Getting error trying to use use Storybook with react-admin "useField must be used inside of a <Form> component"
- Reuse component loaded from a Route
- props.history.push() not working. Not able to route
- Cannot save more than 2 items in localStorage
- react firebase firestore insert json
- dot Notation vs bracket notation with Reactjs
- Proper way to handle server-side protected routes in React?
- onMouseEnter and onMouseLeave to animate multiple Lottie icons in React
- Delete chip in react js Material-ui
- The <Link></Link> react-tag seems to be preventing my app from rendering
- REACT gives some errors that I am not sure why
- open a page with specific id in react
- How to get the replace string in JavaScript
- State from redux store gets lost/ reset when changing route
- How to re-render after state has changed
- getting an error while creating react app
- index.tsx in package react-router has 152 problems
- Welcome page/ first launch page using react/next.js