Learn React Hooks

The useRef Hook

The useRef Hook returns a ref object that can be assigned to a component or element via the ref prop. Refs can be used to deal with references to elements and components in React:

const refContainer = useRef(initialValue)

After assigning the ref to an element or component, the ref can be accessed via refContainer.current. If InitialValue is set, refContainer.current will be set to this value before assignment.

The following example defines an input field that will automatically be focused when rendered:

function AutoFocusField () {    const inputRef = useRef(null)    useEffect(() => inputRef.current.focus(), [])    return <input ref={inputRef} type="text" />}

It is important to note that mutating the current value of a ref does not ...