CODEWITHSUNDEEP
javascriptreactjsreact-hooks
robertwerner_sf
robertwerner_sf

Reputation: 1303

Difference between React.createRef and React.useRef?

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?

Upvotes: 2

Views: 3851

Answers (2)

ckedar
ckedar

Reputation: 1909

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

Upvotes: 1

winwiz1
winwiz1

Reputation: 3164

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.

Upvotes: 3

Related Questions