ds that you want
the parent component to call:

    
    
    import { forwardRef, useRef, useImperativeHandle } from 'react';  
    
    
      
    
    
    const MyInput = forwardRef(function MyInput(props, ref) {  
    
    
      const inputRef = useRef(null);  
    
    
      
    
    
      useImperativeHandle(ref, () => {  
    
    
        return {  
    
    
          focus() {  
    
    
            inputRef.current.focus();  
    
    
          },  
    
    
          scrollIntoView() {  
    
    
            inputRef.current.scrollIntoView();  
    
    
          },  
    
    
        };  
    
    
      }, []);  
    
    
      
    
    
      return <input {...props} ref={inputRef} />;  
    
    
    });

Now, if the parent component gets a ref to ` MyInput ` , it will be able to
call the ` focus ` and ` scrollIntoView ` methods on it. However, it will not
have full access to the underlying ` <input> ` DOM node.

App.js  MyInput.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { useRef } from 'react';
    import MyInput from './MyInput.js';
    
    export default function Form() {
      const ref = useRef(null);
    
      function handleClick() {
        ref.current.focus();
        // This won't work because the DOM node isn't exposed:
        // ref.current.style.opacity = 0.5;
      }
    
      return (
        <form>
          <MyInput placeholder="Enter your name" ref={ref} />
          <button type="button" onClick={handleClick}>
            Edit
          </button>
        </form>
      );
    }
    
    

Show more

* * *

###  Exposing your own imperative methods

The methods you expose via an imperative handle don’t have to match the DOM
methods exactly. For example, this ` Post ` component exposes a `
scrollAndFocusAddComment ` method via an imperative handle. This lets the
parent ` Page ` scroll the list of comments _and_ focus the input field when
you click the button:

App.js  Post.js  CommentList.js  AddComment.js

App.js

Reset  [ Fork
](https://codesandbox.io/api/v1/sandboxes/define?undefined&environment=create-
react-app "Open in CodeSandbox")

    
    
    import { useRef } from 'react';
    import Post from './Post.js';
    
    export default function Page() {
      const postRef = useRef(null);
    
      function handleClick() {
        postRef.current.scrollAndFocusAddComment();
      }
    
      return (
        <>
          <button onClick={handleClick}>
            Write a comment
          </button>
          <Post ref={postRef} />
        </>
      );
    }
    
    

Show more

###  Pitfall

**Do not overuse refs.** You should only use refs for _imperative_ behaviors
that you can’t express as props: for example, scrolling to a node, focusing a
node, triggering an animation, selecting text, and so on.

**If you can express something as a prop, you should not use a ref.** For
example, instead of exposing an imperative handle like ` { open, close } `
from a ` Modal ` component, it is better to take ` isOpen ` as a prop like `
<Modal isOpen={isOpen} /> ` . [ Effects ](/learn/synchronizing-with-effects)
can help you expose imperative behaviors via props.

[ Previous  useId  ](/reference/react/useId) [ Next  useInsertionEffect
](/reference/react/useInsertionEffect)

* * *

How do you like these docs?

[ Take our survey!  ](https://www.surveymonkey.co.uk/r/PYRPF3X)

* * *

[ ](https://opensource.fb.com/)

©  2024

[ Learn React ](/learn)

[ Quick Start ](/learn)

[ Installation ](/learn/installation)

[ Describing the UI ](/learn/describing-the-ui)

[ Adding Interactivity ](/learn/adding-interactivity)

[ Managing State ](/learn/managing-state)

[ Escape Hatches ](/learn/escape-hatches)

[ API Reference ](/reference/react)

[ React APIs ](/reference/react)

[ React DOM APIs ](/reference/react-dom)

[ Community ](/community)

[ Code of Conduct
](https://github.c