[RESOLVIDO] Maneira eficiente para mascarar <inputs> !

Olá TabNewers!

Essa semana tive uma experiência meio estressante ao lidar com uma coisa que parecia fácil.
Como pode ser que eu não seja o único que me estressa programando, resolvi compartilhar minha solução aqui, caso alguém esteja passando pelo mesmo perrengue.

Eu estava programando um campo de input para receber notas, com algumas regrinhas:

1. Aceitar somente valores de 0 a 10.
2. Calcular a média das notas.
3. Permitir números com vírgula (porque é sempre bom ter aquela precisão decimal).

Na minha primeira tentativa, só preciso aplicar a máscar a cada ação do usuário no input (ledo Engano):

const handleChange = (event) => {
    const valorComMascara = mascaraComRegras(event.target.value);
    setValueUser(valorComMascara);
};

<input ... value={valueUser} onChange={handleChange} />

E qual o problema, o valor com máscara sempre aparecia antes mesmo de o usuário terminar de digitar a nota, então ao colocar ',' dava erro.

Depois de bater a cabeça, pesquisar e trocar uma ideia com nosso amigão, encontrei uma solução perfeita:

const handleChange = (event) => {
    setValueUser(event.target.value);
};

const handleBlur = (event) => {
    const value = event.target.value;
    const valorComMascara = mascaraComRegras(value);
    setValueUser(String(valorComMascara).replace('.', ','));
};

<input ... value={valueUser} onChange={handleChange} onBlur={handleBlur} />

Agora, o valor só recebe a máscara quando o input perde o foco (onBlur), ou seja, quando o usuário terminou de digitar de verdade.

E a partir daí, eu fui feliz!

Espero que essa dica tenha ajudado alguém! E claro, se eu escolhi o caminho mais difícil e você conhece uma forma mais fácil, esclare ai nos comentários!