Video Summary

☀️ Quick Takes

Is Clickbait?

1-Sentence-Summary

Favorite Quote from the Author

this is one of the most noble sacrifices I've seen in modern open source

💨 tl;dr

Theo admits he was wrong about React Router's future. It's evolving with Remix features into React Router V7, supporting React 18/19. Vite is now the go-to build tool. Server components are the future, simplifying routing and data loading.

💡 Key Ideas

• Theo's prediction about the end of React Router was wrong; it's thriving and evolving.
• Remix features are being integrated into React Router, leading to React Router V7.
• React Router V7 will be a non-breaking upgrade from V6, supporting React 18 and 19.
• The transition aims to unify and advance the React Router and Remix ecosystems.
• Remix Version 3 will essentially become React Router V7.
• Vite has become the recommended build tool due to its performance and compatibility improvements.
• Server components are seen as the future, impacting routing, bundling, data loading, and more.
• React Router V7 will simplify the adoption of server components, making them accessible for large codebases.
• Hydrogen by Shopify showcases the benefits of server components but merged with Remix for better synergy.
• The new API for Remix and React Router V7 is designed to be simpler and more powerful.
• Server components manage HTML from the server, allow mixing with client-side components, and simplify route-level data loading.
• React Router remains a core component in the React ecosystem, crucial for its future development.

🎓 Lessons Learnt

• Be open to changing opinions based on new information: Adaptability is crucial as new insights and updates emerge.
• Understand the impact of backwards compatibility: Ensuring new updates work with existing codebases prevents disruptions.
• Recognize the benefits of consolidating tools: Combining functionalities into fewer tools simplifies development and reduces overhead.
• Appreciate strategic sacrifices: Sometimes, letting go of certain features or approaches can lead to better long-term solutions.
• Adopt static pre-rendering in React Router: Simplifies the process by avoiding the need to cache HTML from a server.
• Leverage type safety in React Router: Enhances the development of dynamic applications and handling of query parameters.
• Consider Vite for building React apps: Offers faster hot module reloading (HMR) and hot data revalidation (HDR), making development more efficient.
• Switch to standardized bundlers: Using tools like Vite simplifies maintenance and integration compared to custom setups.
• Framework plugins simplify development: Using frameworks like Remix as plugins reduces the need for custom solutions and integrates well with other tools.
• Consolidating tools reduces overhead: Merging functionalities, like Remix into React Router, reduces complexity and confusion.
• Community pushback is part of progress: Resistance is natural, but necessary for advancing web development.
• Legacy codebases need gradual integration paths: Seamless integration methods are crucial for adopting new technologies in older projects.
• Challenge assumptions about app architecture: Server Components enable flexible data and UI handling, challenging traditional boundaries.
• Experimentation leads to improvement: Early frameworks pave the way for better implementations through trial and error.
• Maintain transparency in open source: Honest communication about changes fosters community trust and smooth transitions.
• Leverage parallel upgrade paths: Running current and future versions in parallel ensures smoother upgrades.
• Treat JSX like data: Simplifies the server component model and integrates server-rendered components with client-side ones.
• Simplify server component mindset: Starting with 70-80% of features makes adoption easier.
• Component nesting and passing: Treat components like static data to clarify their structure and usage in server components.
• Suspense and streaming integration: Supports more efficient async data fetching and rendering.
• Route-level data loading: Provides a clearer structure by loading components at the route level rather than just data.
• Embrace the evolution of React Router: Signals a new era, making it an exciting time for developers.
• Engage with the community: Sharing thoughts and seeking feedback ensures diverse insights and shared enthusiasm.

🌚 Conclusion

React Router is here to stay and grow, integrating Remix for a more powerful and simpler API. Embrace Vite for better performance. Server components will reshape how we handle data and UI, making React development more efficient and future-proof.

In-Depth

All Key Ideas

React Router and Remix Updates

• Theo previously predicted the end of React Router, which was incorrect.
• React Router is widely used in many React applications and is not dying.
• Remix, not React Router, is the one being phased out.
• React Router is evolving by incorporating features from Remix.
• The Remix team chose to merge Remix features into React Router to advance the React ecosystem.
• React Router V6 to V7 will be a non-breaking upgrade.
• React Router V7 will include the V plugin from Remix, enhancing convenience.
• React Router V7 will support both React 18 and React 19.
• Remix Version 3 will now be React Router Version 7.
• The transition from Remix Version 2 to React Router Version 7 will be non-breaking.
• The changes aim to create a unified path forward for React Router and Remix users.
• The integration will allow for incremental adoption and further advancement of React Router and Remix.

Key Updates in Web Development Tools

• React Router version 7 introduces new features like server components, server actions, and static pre-rendering.
• Remix initially focused on providing a better experience by using ES build, avoiding traditional tools like webpack.
• The remix team successfully ported their setup to Vite within a short period, making Vite the recommended path.
• The transition to Vite plugins allowed for broader compatibility and better performance.
• Vite's evolution has enabled many meta frameworks to build around it, enhancing integration and efficiency.
• The move to Vite resulted in significant performance improvements, including faster HMR and HDR.

Key Points on React and Remix Developments

• Remix is now just a Vite plugin, making it more flexible and efficient
• Shopify's shop.app is a chaotic React Native app that performs exceptionally well
• Moving Remix to React Router V7 simplifies development and reduces overhead
• Server components are seen as the future of web development
• Most React developers don't use Next.js and work on older codebases
• Implementing server components requires starting at the root of the application
• React Router's integration with server components can make them more accessible for large codebases
• React 19 with RSC (React Server Components) allows for rethinking how to build React applications

Key Changes and Developments in React and Related Frameworks

• React changed the traditional MVC model by allowing developers to decide how to manage the boundaries between data and UI
• Server components alter how we build apps by impacting routing, bundling, data loading, revalidation, and pending states
• Hydrogen by Shopify was the first framework to fully implement server components
• Hydrogen V2 moved away from server components and merged with Remix, which was seen as a beneficial decision for both Shopify and Remix
• The new API for Remix is designed to be simpler and more powerful
• React Router V7 allows running both current and future versions of Remix in parallel, facilitating smoother upgrades
• React Router is a core component in the React ecosystem and is crucial for its forward progress

Key Points about Server Components

• Magic of server components is that they manage HTML from the server, not JavaScript.
• Server components allow returning rendered JSX directly instead of data.
• Mixing client-side and server-side components is possible and beneficial.
• Treating JSX like data simplifies the server component process.
• Server components simplify route-level data loading.
• Returning JSX from the server helps in understanding server components.
• Server components support suspense and streaming.
• Loaders start the request, and content loads with defer/suspense mechanisms.
• Async JSX handling can be complex but is supported.

React Router Updates

• The future of React Router is exciting and promising.
• The previous video titled "The End of React Router" was misleading; React Router is actually undergoing a rebirth.

All Lessons Learnt

Key Lessons from React Router and Remix

• Be open to changing opinions based on new information
• Understand the impact of backwards compatibility
• Recognize the benefits of consolidating tools
• Appreciate strategic sacrifices
• Stay informed about major updates
• Embrace non-breaking upgrades

React Router and Development Tips

• Adopt static pre-rendering in React Router: The new static pre-rendering feature simplifies the process, avoiding the need to cache HTML from a server.
• Leverage type safety in React Router: Improved type safety in React Router enhances the development of dynamic applications and handling of query parameters.
• Consider Vite for building React apps: Vite offers significantly faster hot module reloading (HMR) and hot data revalidation (HDR) compared to previous tools like ESBuild, making it a better choice for development.
• Switch to standardized bundlers: Transitioning to more standard bundlers, like Vite, can simplify maintenance and integration, moving away from custom setup solutions.

Key Points on Modern Web Development

• Framework plugins simplify development: Using frameworks like Remix as plugins (e.g., Vite plugin) allows integrating other tools more easily, reducing the need for custom plugins.
• Adopting server components requires a foundational shift: Unlike hooks, server components need to be integrated from the root of the application, making them harder to adopt in existing projects.
• Consolidating tools reduces overhead: Merging Remix functionality into React Router eliminates the need to split code and discussions across multiple projects, reducing complexity and confusion.
• Community pushback is part of progress: Innovating with server components and integrating them into widely-used tools like React Router will face resistance but is necessary for advancing web development.
• Legacy codebases need gradual integration paths: For large, older codebases, finding seamless ways to integrate new technologies like server components is crucial for adoption.

Key Insights on App Architecture and Development

• Challenge assumptions about app architecture: Server Components challenge traditional MVC and client-server boundaries by enabling flexible data and UI handling.
• Experimentation leads to improvement: Early frameworks like Hydrogen that adopted Server Components faced difficulties, but these experiments paved the way for better implementations.
• Embrace iterative development: Hydrogen V2's transition away from Server Components and collaboration with Remix highlights the importance of pivoting and adapting for better solutions.
• Maintain transparency in open source: Honest communication about changes and upgrades, like with React Router V7, fosters community trust and smooth transitions.
• Leverage parallel upgrade paths: Running current and future versions in parallel, as with Remix apps upgrading to React Router V7, ensures a smoother upgrade process.
• Focus on core components: Recognizing React Router as the central element in the React ecosystem emphasizes the importance of not leaving crucial components behind.

Best Practices for Server Components

• Treat JSX like data - Instead of returning data from the server, return the rendered JSX. This simplifies the server component model and integrates server-rendered components seamlessly with client-side ones.
• Simplify server component mindset - Server components don't need to have all functionalities upfront. Starting with 70-80% of the features makes it easier to adopt and understand.
• Component nesting and passing - You can't pass components directly to server components; treat them like static data. This clarifies how server components should be structured and used.
• Suspense and streaming integration - Server components should support suspense and streaming, making async data fetching and rendering more efficient.
• Async JSX handling - It's challenging to manage async JSX, but confirming it works consistently ensures smoother implementation and fewer surprises.
• Route-level data loading - Loading components at the route level rather than just data simplifies the process and provides a clearer structure for developers.

Key Takeaways for Developers

• Embrace the evolution of React Router - The shift in React Router signals a new era, making it an exciting time for developers invested in its future.
• Stay open to changing opinions - Initial skepticism can transform into excitement as new developments unfold, highlighting the importance of being adaptable.
• Engage with the community - Sharing thoughts and seeking feedback in comments can provide diverse insights and ensure you're not alone in your enthusiasm.