Context and React Server Component are not friends 😳 & a FREE Coaching Call
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.
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.
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 😉)
Weekly Youtube Videos 🎥
🎥 Check out my channel and subscribe for more Frontend, Leadership and Career Development content. 💪
The Frontend Developers Toolbox 🧰
- AI Templates Discover AI templates to use for your next project and impress your employer
- A Video on How to Communicate as a Developer
- A slide over browser on your Mac with SlidePad
- Thoughts about Open source by Lorenzo
I hope you have a great day!
How was today's newsletter?
With your feedback, I can improve the newsletter. Click on a link to vote: