title: React Custom hooks - inheritance?
body: <p>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?</p>
  
  <p>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.</p>
  
  <p>The whole point of these are useEmailFormatValidator can be used in log-in form where as useEmailSignupValidator can be used in sign-up form.  </p>
  
  <p>Below is my code</p>
  
  <p>useEmailFormatValidator</p>
  
  <pre><code>import { useState } from 'react';
  
  export const useEmailFormatValidator = () =&gt; {
    const [value, setValue] = useState('');
    const [validity, setValidity] = useState(false);
  
    const regex = /^(([^&lt;&gt;()[\]\\.,;:\s@"]+(\.[^&lt;&gt;()[\]\\.,;:\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 =&gt; {
      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 };
  };
  </code></pre>
  
  <p>useEmailSignupValidator</p>
  
  <pre><code>import { useState } from 'react';
  import { useEmailFormatValidator } from "../auth";
  
  export const useEmailSignupValidator = () =&gt; {
    const [value, setValue] = useState('');
    const [validity, setValidity] = useState(false);
    const emailFormatValidator = useEmailFormatValidator();
  
    const inputChangeHandler = event =&gt; {
      emailFormatValidator.onChange(event);
      setValue(emailFormatValidator.value);
      setValidity(emailFormatValidator.validity);
    };
  
    const verifyUserNameExists = event =&gt; {
      // Verify username is availble in back-end.
    };
  
    return { value: value, onChange: inputChangeHandler, onBlur: verifyUserNameExists, validity };
  };
  </code></pre>
  
  <p>When I run a test, below does not work as expected and 'value' and 'validity' is undefined.</p>
  
  <pre><code> const inputChangeHandler = event =&gt; {
      emailFormatValidator.onChange(event);
      setValue(emailFormatValidator.value);
      setValidity(emailFormatValidator.validity);
    };
  </code></pre>
  
  <p>Is there anyway to have inheritance in custom hooks?  Or how do you re-use code, of which is the purpose of react hooks?</p>