Context and React Server Component are not friends 😳 & a FREE Coaching Call

Hey friend,

I want to take a quick second to say thank you for subscribing 🙌.

It has been a while since I last asked you, plus this newsletter has grown quite a bit. I only like to create content that will bring value to you based on the level you are at.

FREE Coaching Call for Feedback 🤙

As a thank you for subscribing to my newsletter, I'm offering a 15-min FREE call for the first 5 people that provide me feedback for this newsletter.

Reply to this email and let me know how I can improve this newsletter and what you think! Once you respond, I will send you a link to book a call! 😃

Our Weekly Snack: You can't create React Context in a Server Component in Next.js 🍿

React Server Components have been really on my mind lately. Every week I discover a new Gotcha you should know about.

This week, let's focus on passing context with React Server Components.

You cannot create React Context inside a server Component. Remember, every component by default is a Server component in the Next 13 app directory 😳.

Well, you might think, let's convert the top-level component to a Client Component. Umm, you can't either, remember? You cannot make a Server Component a child of the Client, and if you make the Root component a Client, then every single component in the project will be a child, so we will have to say goodbye 👋 to Server Components.

What's the workaround 👇

Let's say you want to add dark mode to your app. We can create a ThemeProvider for it and store the value as dark or light. The best place to do this would be RootLayout, i.e. the root of the tree.

Since context providers are typically rendered near the root of an application to share global concerns, like the current theme. Because context is not supported in Server Components, trying to create a context at the root of your application will cause an error like the one below ❌

You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

Learn more: https://nextjs.org/docs/getting-started/react-essentials

Hence we can create a ThemeProvider, mark it as ‘use client’ and pass that on. Here's how 👇

You can click on this image to copy the snippet ✨

With the provider rendered at the root, all other Client Components throughout your app can consume this context.

Latest Frontend Gossip/News 🤫

Learn RSCs, i.e. React Server Components from scratch . In this technical deep dive, Dan Abramov implemented a very simplified version of React Server Components (RSC) from scratch.

After all the Twitter Drama with Next.js App Router, Lee Rob and Delba wrote about the updates coming to App Router

Here is a 📍 React Native Community Map that our very own Lorenzo has created. It covers all the community events in React Native (it doesn't include my newsletter yet 😉)