Как обновить компонент в зависимости от функции?

Question

[Kappy]

Совсем запутался, помогите разобраться.
Есть форма. В ней используются радиобаттоны - кнопки, как переключатели. У активной кнопки есть класс active. Мне нужно выводить степень заполненности формы, каждое переключение кнопки использует Set State. Так же я использую refs. Моя идея такова: State поменяли, происходит жизненный цикл смены состояния. Вызывается : Component Did Update. Она нужна нам, поскольку мы тут можем получить refs с формы. В ней я произвожу подсчет выбранных ответов, и хочу прокинуть

this.setState({progress:active/((active+overs)/2)*100})

И тут код ушел в рекурсию.
Не так разве происходит цикл :
Нажали на кнопку, вызвали SetState, вызвался Will Update , render, DidUpdate тут мы меняем еще раз стейт , где он должен как раз прокинуть стэйт :

this.setState({progress:active/((active+overs)/2)*100})

Я немного запутался в жизненном цикле, помогите разобраться , заранее спасибо!
Я так понимаю, что в will update как раз и происходит рекурсия, потому что там вообще нельзя вызывать setState. Но как тогда и данные получить с формы, и состояние обновить. На ум приходит только shouldComponentUpdate (state.prev!=state.next)

Решил пойти другим путем, сделал функцию, при клике на которую берем refs, считаем и меняем стейт.

progressForm(){
   console.log(this.myRef)
   var active=0;
   var overs=0;
  for(let i=0;i<this.myRef.current.length;i++){
    console.log(this.myRef.current[i].className)
    if (this.myRef.current[i].className.includes('active')){
        active++;
    }
        else if (this.myRef.current[i].className.includes('btn'))
        overs++;
  }
  
  this.setState({progress:active/((active+overs)/2)*100}) 

 
 }

И суть в том, что лог формы выводит форму, со сразу измененным состоянием, где класс active.
А лог в цикле выводит старые данные, где еще класс не поменялся.