React Custom hooks - inheritance? - reactjs

Question

I know that the whole point of react hooks are to get away from class based component and promote functional component. However, is it possible to achieve inheritance in react hooks?
For example here, I create two hooks.
1. useEmailFormatValidator of which validates if input (onChange) is in valid Email format.
2. useEmailSignupValidator inherits useEmailFormatValidator but extends it's capability to verify user can use the username when (onBlur) event happens.
The whole point of these are useEmailFormatValidator can be used in log-in form where as useEmailSignupValidator can be used in sign-up form.
Below is my code
useEmailFormatValidator
import { useState } from 'react';
export const useEmailFormatValidator = () => {
const [value, setValue] = useState('');
const [validity, setValidity] = useState(false);
const regex = /^(([^<>()[\]\\.,;:\s#"]+(\.[^<>()[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const inputChangeHandler = event => {
setValue(event.target.value.trim());
if (regex.test(String(event.target.value.trim()).toLowerCase())) {
setValidity(true);
} else {
setValidity(false);
}
};
return { value: value, onChange: inputChangeHandler, validity };
};
useEmailSignupValidator
import { useState } from 'react';
import { useEmailFormatValidator } from "../auth";
export const useEmailSignupValidator = () => {
const [value, setValue] = useState('');
const [validity, setValidity] = useState(false);
const emailFormatValidator = useEmailFormatValidator();
const inputChangeHandler = event => {
emailFormatValidator.onChange(event);
setValue(emailFormatValidator.value);
setValidity(emailFormatValidator.validity);
};
const verifyUserNameExists = event => {
// Verify username is availble in back-end.
};
return { value: value, onChange: inputChangeHandler, onBlur: verifyUserNameExists, validity };
};
When I run a test, below does not work as expected and 'value' and 'validity' is undefined.
const inputChangeHandler = event => {
emailFormatValidator.onChange(event);
setValue(emailFormatValidator.value);
setValidity(emailFormatValidator.validity);
};
Is there anyway to have inheritance in custom hooks? Or how do you re-use code, of which is the purpose of react hooks?

Answer 1

This isn't really a custom hooks thing, imho. Why not do something like this?
const isValidEmail = email => {
const regex = /^(([^<>()[\]\\.,;:\s#"]+(\.[^<>()[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return regex.test(email);
};
const MyComponent = () => {
const [inputVal, setInputVal] = useState('');
return(
<div>
<input
type='text'
name='my-input'
onChange={e => {
const email = e.target.value;
if(isValidEmail(email)){
setInputVal(email);
}else{
alert('invalid email')
}
}}
/>
</div>
)
}