React useRef && forwardRef

forwardRef.jsx

// sample use case: scroll to a React component by using a reference.
import React, { forwardRef, useRef } from 'react'

// @ts-ignore
const Article = forwardRef(function Article({ onClick }, ref) {
	return (
		<article ref={ref}>
			<h1>A React article for Latin readers</h1>
			// Rest of the article's content...
			<button onClick={onClick}>Back to the top</button>
		</article>
	)
})

// ...

const AnotherComponent = () => {
	const articleRef = useRef()

	const handleBackClick = () =>
		articleRef.current.scrollIntoView({ behavior: 'smooth' })

	return <Article ref={articleRef} onClick={handleBackClick} />
}

export default AnotherComponent

useRef.jsx

// sample use case: scroll to an element by using a reference.
import React, { useRef } from 'react'

const Article = () => {
	const titleRef = useRef()

	function handleBackClick() {
		titleRef.current.scrollIntoView({ behavior: 'smooth' })
	}

	return (
		<article>
			<h1 ref={titleRef}>A React article for Latin readers</h1>
			// Rest of the article's content...
			<button onClick={handleBackClick}>Back to the top</button>
		</article>
	)
}