1. Use meta tags in any child components

That’s right. You can now use meta tags in any component deep down in your components tree. That makes sense because the component and holds the meta information can be so deeper than the head tag. That’s why react now natively supports using meta tags in any component. Here’s a code example:

export default function Post({title, description}) {
	return <div>
		My post title: {title}
		My post description: {description}
		<title>{title}</title>
		<meta name="description" content={description} />
	</div>;
}

React will be able to detect any meta tags from any components and inject them to head making your life a bit less complicated!

2. Use ref as a prop

You heard it right. No more forwardRef! We can now directly pass ref in a component.

// components/card.jsx

export default function Card({ ref }) {
	return <div ref={ref}>My card container.</div>;
}

// page.jsx

import Card from "@/components/card";
import { useRef } from "react";

export default function Page() {
	const cardRef = useRef(null);
	
	// do whatever you want with cardRef
	
	return <Card ref={cardRef} />
}

to be continued…