React hook for passive validation (e.g. on form submit)

usePassiveValidation.jsx

import React, { useEffect, useState } from 'react';

function usePassiveValidation(value, validator) {
    const [valid, setValid] = useState(true);
    const [checkValue, setCheckValue] = useState(null);
    const [didMount, setDidMount] = useState(false);

    function validate() {
        setCheckValue(value);
        return validator(value);
    }

    useEffect(() => {
        setDidMount(true);
    }, []);

    useEffect(() => {
        setValid(true);
    }, [value]);

    useEffect(() => {
        if (didMount) setValid(validator(checkValue));
    }, [checkValue]);

    return [ valid, validate ];
}

function Example() {
    const [inputValue, setInputValue] = useState('');
    const [validIfNotEmpty, validateInput] = usePassiveValidation(inputValue, x => !!x);
    
    function handleChange(e) {
        setInputValue(e.target.value);
    }
    
    return (
        <div>
            <input onChange={handleChange) value={inputValue} />
            <br />
            {validIfNotEmpty ? 'valid' : 'not valid'}
            <br />
            <button onClick={validateInput}>validate</button>
        </div>
    );
}