Hoist Title and Meta tags in React 19

In React 19, we can easily add a title tag like "Starship Deets" which then appears in the head section of the HTML even when we render it inside our components. This method also applies to meta tags such as character set and viewport settings, which are also lifted to the head section automatically.

This is an awesome feature because it maintains the same composition style we are familiar with in React components. It simplifies the handling of HTML head elements without needing extra setups like useEffect for accessing the head section. Even in situations where our components are rendering within a body element, like within a div, we can manage our head content directly within our components. React takes care of hoisting these elements where they need to go.

Transcript

[00:00] We're going to start by putting this inside of a fragment. And inside of here now we can say title, Starship Deets, and now we get our Starship Deets. And you'll notice the title is showing up in the head. And we can also do other meta tags in here as well. So, meta for our char set and our viewport configuration and those will be hoisted to the head as well.

[00:22] And this is awesome because it allows us to use the same composition model that we enjoy from our React components for these specific tags, even if what we're rendering doesn't include the HTML and the head. Those will just be hoisted for us. The shell component is being rendered for us down here just to a div that is inside of the body. And So we don't have access to the head without using a use effect or something, but we can now render our meta and our title tags directly in our React components, and they will be hoisted for us by React.