So when the person is starting to enter an email address, the page goes red until he enters the .com at the end? He gets an error for the first 9 digits of a phone number? Do you implement debouncing?
There isn't one thing called "conventional React", there are all kinds of validation libraries on npm and many strategies laid out on Stack Overflow.
https://stackoverflow.com/questions/41296668/how-do-i-add-va...
I think it's fair to say we have different opinions on good UX, no need to debate it any further