JSX over the Wire

Summary

Suppose you have an API route that returns some data as JSON: app.get('/api/likes/:postId', async (req, res) => { const postId = req.params.postId; const [post, friendLikes] = await Promise.all([ getPost(postId), getFriendLikes(postId, { limit: 2 }), ]); const json = { totalLikeCount: post.totalLikeCount, isLikedByUser: post.isLikedByUser, friendLikes: friendLikes, }; res.json(json); }); You also have a React component that needs that data: function LikeButton({ totalLikeCount, isLikedByUser, friendLikes }) { let buttonText = 'Like'; if (totalLikeCount > 0) { // e.g. "Liked by You, Alice, and 13 others" buttonText = formatLikeText(totalLikeCount, isLikedByUser, friendLikes); } return ( <button className={isLikedByUser ? 'liked' : ''}> {buttonText} </button> ); } How do you get that data into that component? You could pass it from a parent component using some data fetching library: function PostLikeButton({ postId }) { const [json, isLoading] = useData(`/api/likes/${postId}`); // ... return ( <LikeButton totalLikeCount={json.totalLikeCount} isLikedByUser={json.isLikedByUser} friendLikes={json.friendLikes} /> ); } That’s one way of thinking about it. But have another look at your API: app.get('/api/likes/:postId', async (req, res) => { const postId = req.params.postId; const [post, friendLikes] = await Promise.all([ getPost(postId), getFriendLikes(postId, { limit: 2 }), ]); const json = { totalLikeCount: post.totalLikeCount, isLikedByUser: post.isLikedByUser, friendLikes: friendLikes, }; res.json(json); }); Do these lines remind you of anything? Props. You’re passing props. You just didn’t specify where to. But you already know their final destination—LikeButton. Why not just fill that in? app.get('/api/likes/:postId', async (req, res) => { const postId = req.params.postId; const [post, friendLikes] = await Promise.all([ getPost(postId), getFriendLikes(postId, { limit: 2 }), ]); const json = ( <LikeButton totalLikeCount={post.totalLikeCount} isLikedByUser={post.isLik...