How React Uses Closures to Avoid Bugs
The sneaky, surreptitious bug that React saved us from by using closures.
![Kent C. Dodds](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fkent-c-dodds.e298a945.png&w=128&q=100)
React server components have been stirring up the developer community, and I've noticed a mix of excitement and concern. Some folks are uneasy about the blurred lines between server and client, and the implementation challenges, especially with Next.js. But despite these bumps in the road, I want to tell you why I continue to be optimistic about the future of React Server Components.
For decades, we've grappled with integrating backend logic and front-end interactivity in a seamless way. React server components step in as a remarkable solution to this age-old problem. They allow us to compose server and client code without the usual hassle of switching between models.
The network is what makes web development so tough for the majority of web applications. Remix and other frameworks have done a great job of bridging the network chasm and I've really enjoyed using Remix for the last few years. It completely changed what it felt like to build web apps for me and enabled me to handle more and more use cases on my own with a better user experience.
But bridging the network chasm isn't enough. Ryan Florence's talk "Mind the Gap" at Big Sky Dev Con last month was a real eye-opener. If you haven't seen it yet, do yourself a favor and watch it. He perfectly illustrates the power of React server components in not only bridging the gap between the backend and the frontend, but making the network completely disappear.
It's true that React server components introduce new challenges. These fresh pain points can seem daunting because we're not used to them. But let's not forget that all innovations in software come with their own set of hurdles. What's important to remember is that these pain points won't always be there. With any new technology, this is as tough as it gets, and it can only improve from here.
I have high hopes for Remix and its potential to implement React server components in a way that will alleviate many of the current pain points. The team behind Remix is poised to deliver an exceptional developer and user experience (as they have consistently done over the last decade of development with React).
Yes, there are complexities, especially for framework authors grappling with React server components. It's a tough time to be in their shoes, with all the abstractions that need to be figured out. But for the benefit of framework users, the effort is worthwhile. The goal is clear: to build better user experiences with an amazing developer experience. I'm confident the juice is worth the squeeze.
What stands out with React server components is their ability to seamlessly compose interactions between the client and the server. This is what Ryan described as the elimination of the "network chasm" in both directions. I'm confident that React server components are the future, and we'll look back at these times as the necessary growing pains that led to better solutions.
Folks who are using React Server Components right now (most of them are working in Next.js apps) are in the midst of uncertainty, dealing with boilerplate and annoyances. But once we develop the right level of abstractions, we'll be able to create user experiences that are not only better but also easier to build.
I'm super bullish on what Remix is doing. They're on track to do an amazing job, and I can't wait to see it unfold. So, to those of you who are worried about React server components and their impact on the React developer's future, I urge you to share my optimism. Things are only going to get better from here.
Personally, I think it's worthwhile to learn about React Server Components. There are framework implementations of RSCs currently in frameworks that don't match my sensibilities so I'm not actively using them yet. For now, I'm sticking with Remix/React Router as a phenomenal way to build excellent user experiences on the Web. There are shortcomings with Remix for now for sure, but those will be largely solved by RSCs.
If you've not watched Ryan's other talk at React Conf titled "Vanilla React", then you should definitely watch that to see what the RSC experience with React Router v7 will be like (it'll be amazing). So stick with Remix/React Router and you'll be well situated to take advantage of RSCs when they're ready. And it'll enable you to build better experiences faster.
Have a nice day, and stay optimistic about the future of web development!
Delivered straight to your inbox.
The sneaky, surreptitious bug that React saved us from by using closures.
Some common mistakes I see people make with useEffect and how to avoid them.
Truly maintainable, flexible, simple, and reusable components require more thought than: "I need it to do this differently, so I'll accept a new prop for that". Seasoned React developers know this leads to nothing but pain and frustration for both the maintainer and user of the component.
Excellent TypeScript definitions for your React forms