title: What is the different between useImperativeHandle and useRef?
body: <p>As I understand, <code>useImperativeHandle</code> helps parent component able to call function of its children component. You can see a simple example below</p>
  <pre><code>const Parent = () =&gt; {
      const ref = useRef(null);
      const onClick = () =&gt; ref.current.focus();
  
      return &lt;&gt;
          &lt;button onClick={onClick} /&gt;
          &lt;FancyInput ref={ref} /&gt;
      &lt;/&gt;
  }
  
  function FancyInput(props, ref) {
      const inputRef = useRef();
      useImperativeHandle(ref, () =&gt; ({
        focus: () =&gt; {
          inputRef.current.focus();
        }
      }));
      return &lt;input ref={inputRef} /&gt;;
  }
  
  FancyInput = forwardRef(FancyInput);
  </code></pre>
  <p>but it can be easy achieved by using only <code>useRef</code></p>
  <pre><code>const Parent = () =&gt; {
      const ref = useRef({});
      const onClick = () =&gt; ref.current.focus();
  
      return &lt;&gt;
          &lt;button onClick={onClick} /&gt;
          &lt;FancyInput ref={ref} /&gt;
      &lt;/&gt;
  }
  
  function FancyInput(props, ref) {
      const inputRef = useRef();
      useEffect(() =&gt; {
          ref.current.focus = inputRef.current.focus
      }, [])
      return &lt;input ref={inputRef} /&gt;;
  }
  
  FancyInput = forwardRef(FancyInput);
  </code></pre>
  <p>So what is the true goal of <code>useImperativeHandle</code>. Can someone give me some advices?. Thank you</p>