Please enable JavaScript.
Coggle requires JavaScript to display documents.
React Refs - Coggle Diagram
React Refs
forwarding ref
passes a
ref
to a
children
similar to props, but it's a ref
use case
basically for library makers
usage
functional component
React.forwardRef(props, ref)
ref
holds a data of
DOM element
rendered react element (instantiated)
use cases
managing focus, text selection, media playback
integrating with DOM libraries
usage
class component
instantiate it
this.refName = React.createRef()
define what uses it
<button ref={this.refName} />
access it
this.refName.current
functional component
hook it
const refName = useRef<type>(null)
similar usage to
class component
section
miscellaneous
ref
avoids its value from getting re-rendered
good for initial constant value
example
const CONSTANT = useRef(100)