React 18 is on the horizon, and it’s bringing some of the most significant changes to the library since hooks were introduced. As the alpha version has hit GitHub and the React team has shared their plans, there’s a lot to unpack and prepare for. Having spent the last few weeks digging through discussions and experimenting with the alpha, I’m excited to share what these changes mean for our codebases. ...
As web development evolves, many developers find themselves wanting to migrate their Create React App (CRA) projects to Next.js to take advantage of features like server-side rendering, static site generation, and improved routing. Today, I’m breaking down an exciting new experimental codemod tool that has recently landed in the @next/codemod package designed to automate this migration process. Experimental CRA to Next.js Migration Tool This transformation has recently been added to the official @next/codemod package as an experimental feature, making it easier than ever to migrate existing CRA applications to Next.js. Being experimental, it may continue to evolve as the Next.js team gathers feedback from early adopters. ...
The Code Splitting Dilemma The React team recognized bundle size challenges by introducing React.lazy() and Suspense for component-based code splitting. This native solution works great for client-side rendering, but falls apart when you need SSR: // This works fine with client-side rendering const LazyComponent = React.lazy(() => import('./LazyComponent')); function MyComponent() { return ( <Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </Suspense> ); } If you’re using Next.js, Gatsby, or any other SSR solution, the code above will throw the dreaded error: “Suspense is not supported during server-side rendering.” ...
When Webpack 5 was officially released in October, the frontend community couldn’t stop talking about one feature in particular: Module Federation. After years of grappling with increasingly complex frontend architectures, the promise of being able to seamlessly share code between applications at runtime—not just build time—feels like the solution many of us have been waiting for. If you follow frontend architecture discussions, you’ve likely seen the buzz around Module Federation since earlier this year when Zack Jackson first introduced the concept. As he aptly put it, this is “the JavaScript bundler equivalent of what Apollo did with GraphQL” - a truly revolutionary approach to code sharing. ...
Managing state beyond simple component scope is one of the perennial challenges. Redux was the default answer for anything complex, but the landscape recently feels… different. Hooks have fundamentally changed how we write React, and with them came a resurgence of interest in built-in solutions and even some exciting new contenders. We’re seeing teams actively questioning the need for heavyweight libraries on every project. Can the built-in Context API truly handle complex applications? And what about this new experimental library, Recoil, that Facebook dropped on us earlier this year? ...