if(etapaAtual === formularios.length)

function FormularioCadastro({ aoEnviar, validarCPF }) {
  const [etapaAtual, setEtapaAtual] = useState(0);
  const [dadosColetados, setDados] = useState({});

  useEffect(()=>{
    if(etapaAtual === formularios.length){
      aoEnviar(dadosColetados);
    }
  })

  const formularios = [
    <DadosUsuario aoEnviar={coletarDados} />,
    <DadosPessoais aoEnviar={coletarDados} validarCPF={validarCPF} />,
    <DadosEntrega aoEnviar={coletarDados} />,
  ];

  function coletarDados(dados){
    setDados({...dadosColetados, ...dados});
    proximo();
  }
  function proximo() {
    setEtapaAtual(etapaAtual + 1);
  }
    return <>{formularios[etapaAtual]}</>;
}

export default FormularioCadastro;

durante a aula, o professor esta estruturando esse codigo, e fala naturalmente que no useEffect, a gente manda os dados coletados quando estiver com o estadoAtual igual ao tamanho do formularios. mas eu não consigo entender qual foi o pensamento por trás disso. qual o processo logico por traz?