Difference between React.createRef and React.useRef?

Question

I'm new to using React Hook refs. I followed several code examples, with all of them referencing useRef but the code simply didn't work. Yet when I changed it to createRef then it worked perfectly. I'm thus curious what the difference between the two functions is?

// Near the top of my component
let companyNameRef = React.createRef();

// A useEffect added simply to give focus to a particular input element the first time the component is loaded
useEffect(() => {
  if (companyNameRef.current) {
    companyNameRef.current.focus();
  }
}, [companyNameRef]);

// Within the input element
<Form.Control name='companyName' 
              as='input'
              onChange={e => handleChange(e)}
              ref={companyNameRef}
/>

If I change createRef() to useRef() or useRef(null) or useRef('') the initial focus functionality stops working.

Might anyone know why?

Possible duplicate of What's the difference between `useRef` and `createRef`? — ravibagul91
– ravibagul91, Commented Sep 16, 2019 at 6:38

winwiz1 · Accepted Answer · 2019-09-16 06:46:41Z

3

createRef is meant to be used in React class components for capturing DOM handles.
useRef is meant to be used in React function components not only for capturing DOM handles but also as a persistent storage which emulates a class member variable in class components.

In your code (which I assume belongs to React.FunctionComponent) try to set let companyNameRef = useRef(null); and also provide an empty array e.g. [] to useEffect as the second argument to ensure it is called for initial rendering only.

edited Sep 16, 2019 at 6:46

answered Sep 16, 2019 at 6:35

winwiz1

3,19214 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

robertwerner_sf Over a year ago

Just tried what you said but it broke the focus-on-start functionality. Tried all 4 combinations and the only one that works is createRef with companyNameRef as a dependency. Note: a console.log at the top of the useEffect proved that companyNameRef.current is null for some time until it isn't. That's why [] as a dependency doesn't work. P.S. My component is indeed a function component: `const AddCustomer = () => { ... };

winwiz1 Over a year ago

@robertwerner-goodyear My answer has the standard React recipe known to work. If it doesn't then it must be an issue specific to the form you are using. There are several popular forms and you didn't indicate which one you use. The code as='input' suggests semantic-ui Form, have a look here

robertwerner_sf Over a year ago

Interesting. FYI I'm using the React Bootstrap Form. In any case, I do appreciate your feedback and helpful hints. Thankfully I do have a straightforward way to get the cursor to appear in the topmost input element upon page load. That it doesn't appear to work with the "standard" approach is interesting but not a deal breaker.

ckedar · Accepted Answer · 2019-09-16 11:37:54Z

1

For detailed explanation of difference between createRef and useRef see What's the difference between `useRef` and `createRef`?

The reason why it stops working in your code when you switch to useRef is

Keep in mind that useRef doesn’t notify you when its content changes. Mutating the .current property doesn’t cause a re-render. If you want to run some code when React attaches or detaches a ref to a DOM node, you may want to use a callback ref instead.

https://reactjs.org/docs/hooks-reference.html#useref

answered Sep 16, 2019 at 11:37

ckedar

1,9097 silver badges7 bronze badges

Collectives™ on Stack Overflow

Difference between React.createRef and React.useRef?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related