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.
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! π
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.
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.
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.
β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 π)
β4 Gotchas about React Server Components that you didnβt know Next.js 13 β
ββ
π₯ Check out my channel and subscribe for more Frontend, Leadership and Career Development content. πͺ
β
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: