score:1
Accepted answer
const [counter, setCounter] = useState(0);
const counterValid = counter < 60;
useEffect(() => {
const intervalId = counterValid && setInterval(() =>
setCounter((t) => t + 1)
, 100);
return () => clearInterval(intervalId)
}, [counterValid]);
return (
<div>
<div>
<Circle
size={250}
strokeWidth={5}
percentage={counter*(100/60)}
color="#229880"
/>
</div>
</div>
score:0
// Change this
setCounter((t) => t + 1);
// To this
setCounter(counter + 1);
score:3
useEffect(() => {
const intervalId = setInterval(() => {
setCounter((t) => {
if (t >= 60) clearInterval(intervalId);
return (t < 60) ? t + 1 : t;
});
}, 100);
return () => clearInterval(intervalId);
}, []);
Source: stackoverflow.com
Related Query
- How stop setInterval automatically in React hooks?
- How to clean up setInterval in useEffect using react hooks
- How to reset setInterval function using react hooks
- How to stop React Ant Design Upload component from posting files automatically
- How to stop browser back button using react js hooks and history api?
- How to Sort Form Input Automatically With React Hooks
- How do I assign setInterval to variable and clear it in React + Hooks
- How to compare oldValues and newValues on React Hooks useEffect?
- How to use `setState` callback on react hooks
- How to sync props to state using React hooks : setState()
- How do I update states `onChange` in an array of object in React Hooks
- How can I use React hooks in React classic `class` component?
- React Hooks - How do I implement shouldComponentUpdate?
- How to send request on click React Hooks way?
- How to implement Error Boundary with React Hooks Component
- How to focus something on next render with React Hooks
- How to mock history.push with the new React Router Hooks using Jest
- How do react hooks determine the component that they are for?
- How to handle dependencies array for custom hooks in react
- How to stop memory leak in useEffect hook react
- How to prevent child component from re-rendering when using React hooks and memo?
- React Hooks - How to get parameter value from query string
- How to fix nextCreate is not a function setting up useMemo setting up authentication react router and hooks
- React Hooks with React Router v4 - how do I redirect to another route?
- How to handle/chain synchronous side effects that depend on another with React hooks
- how to set state array using react hooks
- How to do flow type annotations for React hooks (useState, etc.)?
- How does JavaScript mechanism behind react hooks work?
- When and how to choose between React Hooks and old HOC props passing?
- How to implement componentDidMount with hooks in React to be in line with the EsLint rule "react-hooks/exhaustive-deps": "warn"?
More Query from same tag
- What typescript type do I use with useRef() hook when setting current manually?
- React Native does not support development on Windows (yet)?
- Error: Module not found: Error: Can't resolve './src/api' in 'D:\opensource\sound-redux\node_modules\soundcloud'
- React MUI Select Object not showing selected value
- Have refreshed state in Hook in loop
- React/Leaflet - Error: Map container is already initialized
- How to use <Link> tag in pure Typescript(.ts)?
- Reactstrap - collapse Navbar on NavLink click only on mobile
- Getting svg fir image src with webpack returns 304
- Display custom messages for radio options in Ant Design form
- How to set an an object with a dynamic key as React state in Typescript
- Import data from API to Algolia
- Should I put index.js in every component in react project?
- Next/React Hydration Failed Error in a functional React component
- OnClick event not firing on first click in React
- React routing to endpoint but not rendering content
- es6 call extended component function
- How to run React useEffect only once and property update state with setState
- React component to return something other than jsx
- JSON in Gatsby with GraphQL
- Passing state data to another react component
- I have assigned a unique key prop bu keep getting the error
- How to fix "TypeError: this.props.messages.map is not a function" in react-redux
- Object.assign does not update my state (React)
- Uncaught TypeError: Cannot read property 'path' of undefined - React
- How to clone an array into useState hook
- React Application Will "Flash" Default Page Before Redirecting An Authenticated User
- React-modal for dynamic display of images
- lock/prevent close of menu reactjs
- How to get single data based on ID in react firestore v9?