Advanced React

Chapter 9 · 9 examples

Refs: from storing data to imperative API

Accessing the DOM in React · What is Ref? · Difference between Ref and state · Ref update doesn't trigger re-render · Ref update is synchronous and mutable · When can we use Ref then? · Assigning DOM elements to Ref · Passing Ref from parent to child as a prop · Passing Ref from parent to child with forwardRef · Imperative API with useImperativeHandle · Imperative API without useImperativeHandle

  1. Example 1Storing input value in a ref
  2. Example 2Ref update skips re-render
  3. Example 3Ref value not seen by children
  4. Example 4Refs for non-rendered data
  5. Example 5Focusing a DOM element via ref
  6. Example 6Passing a ref as a prop
  7. Example 7Forwarding refs with forwardRef
  8. Example 8Imperative API with useImperativeHandle
  9. Example 9Imperative API by mutating the ref