Выполнять проверку перед каждым рендерингом

Question

Я работаю над этим компонентом и хочу проверять его поля перед каждым рендерингом. Если они недействительны, я хочу отключить кнопку в родительском элементе.

Вот что я получил до сих пор:

export default function Input(props) {

  const [inputs] = useState(props.inputs);

  const didChangeRef = useRef([]);

  useEffect(() => {
    if (!_.isEqual(didMountRef.current, props.inputs)) {
      validateInput(input);
      didChangeRef.current = props.inputs;
    }
  });

  const validateInput = input => {
     const errors = useValidation(input);
     if(Object.keys(errors).length !== 0) {
       props.setIsValid(false);
     }
  }

 return (
  <input
   onChange={e=> props.setProperty(e)}>
  </input>
  <input
   onChange={e=> props.setProperty(e)}>
  </input>
 )
}

Если вход изменяется, он устанавливает свойство в родительском и этот компонент перерисовывается. Входные данные - это массив объектов, и я буду sh проверять его содержимое на каждом рендере (или componentDidMount). Я либо получаю l oop бесконечно, либо запускаю проверку только один раз.

Я ценю вашу помощь.

PS:

Я также попробовал другой подход, но он все еще завершается бесконечно:

export default function Input(props) {

  const didMountRef = useRef(true);

  useLayoutEffect(() => {
    if (didMountRef.current) {
      didMountRef.current = false;
      return;
    }
    validate(input);
  });

  const validate = input => {
    // validation...
  }

}

Вот родительский компонент:

class CreateShoppingItem extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      storage: {},
      isValid: true,
    };
  }

  setIsValid = (isValid) => {
    this.setState({ isValid });
  };

  render() {
    return (
      <div>
        <Input setIsValid={this.setIsValid} inputs={this.storage.inputs} />
        <Button disable={!isValid}></Button>
      </div>
    );
  }
}