When React renders a page (screen), we need to somehow pass page metadata, such as page title, back to the caller. Look at this page component for example:

functionPrivacyPage() { 
return ( 
<div> 
<h1>Privacy Policy</h1> 
<p>Coming soon</p> 
</div> 
  ); 
} 

It has a title and some text. Wouldn't it be good to pass this exact title up to the rendering logic, so it could set <title>Privacy Policy</title> on the server (during server-side rendering) and call document.title = "Privacy Policy" on a client?

To solve this problem, we can use the context feature described previously. This is what the new PrivacyPage component would look like:

functionPrivacyPage(props, { page }) { 
page.title = 'Privacy Policy'; 
return ( 
<div> 
<h1>{page.title}</h1> 
<p>Coming soon</p> 
</div> 
  ); 
} 
 
PrivacyPage.contextTypes = { 
page: PropTypes.shape({ title: PropTypes.string }).isRequired...