title: React - Checking for a value in an uncontrolled input?
body: <p>I've got a custom Input control, which I'd like <strong>to be uncontrolled</strong>. I don't care what the user writes or where this is stored. However, <strong>I need to know if the input has some value or not</strong>, because depending on that it will have an appearance or another (such as a floating label).</p>
  <p>Since <strong>it's not possible to check purely by CSS</strong> if an input has a value or not (because the attribute <code>value</code> does not get updated when the user types and changes its value), the only way to know if it has a value or not is programatically.</p>
  <p>If I use <code>useState</code> to keep a local state of its <code>value</code> just to know if it has some (though it keeps being uncontrolled), whenever <strong>some external script changes the value of the input using <code>ref</code></strong> (for example, <code>react-hook-forms</code> <code>reset</code> function), it <strong>won't get updated</strong> because the state won't notice the change, and thus the input will be empty but its state will think it still has a value.</p>
  <p>As it's not a possibility, then, I wanted to access and <em>watch</em> for the <code>ref</code> <code>.value</code> changes. However, it doesn't change (or, at least, it doesn't notify the change). If I access the <code>value</code> prop directly, it has the correct value, but it doesn't trigger the <code>useEffect</code> although what I'm using as a dependency is the <code>value</code> and not the <code>ref</code> itself.</p>
  <pre><code>  const [hasValue, setHasValue] = useState(false);
  
    useEffect(() =&gt; {
      setHasValue(!!inputRef?.current?.value);
    }, [inputRef?.current?.value]);
  </code></pre>
  <p><a href="https://codesandbox.io/s/aged-water-oc6tc1?file=/src/Input.jsx" rel="nofollow noreferrer">Here is Codesandbox a sample of what I'm referring.</a></p>
  <p>Is there any way to check the actual value of the input inside my custom component <strong>without having to send a <code>value</code> prop from the parent</strong>, which is able to react to external changes by
  <code>ref</code>, too? So, <strong>no matter how the input value changes</strong>, it's aware of it.</p>