Skip to content

Fix interactive part of the Circular Progress sample#1020

Merged
mddragnev merged 4 commits into
vnextfrom
mtihova/circular-progress
Jan 30, 2026
Merged

Fix interactive part of the Circular Progress sample#1020
mddragnev merged 4 commits into
vnextfrom
mtihova/circular-progress

Conversation

@MarielaTihova
Copy link
Copy Markdown

Resolves #978

if(!progress) { return; }
this.circularProgress = progress;
const incrementProgress = () => {
setCurrentValue(currentValue + 10);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In react this is not the correct way to update a state based on its old value. There is a possibility that this introduces bugs depending on react change detection and rendering. You should do it like this:

const incrementProgress = () => {
  setCurrentValue((oldValue) => {
     const newValue = oldValue + 10;
     if (newValue > 100) {
       return 100;
     }
      return newValue;
   });
}

Or

const incrementProgress = () => {
    setCurrentValue(prev => Math.min(prev + 10, 100));
}

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mddragnev a very elegant approach indeed! Thanks for catching that! 🙌

@mddragnev mddragnev merged commit c69a991 into vnext Jan 30, 2026
5 checks passed
@mddragnev mddragnev deleted the mtihova/circular-progress branch January 30, 2026 14:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Circular Progress - Gradient Progress Sample is not working

2 participants