React in 2023 and Beyond
I have been developing React applications for quite a few years now, and here are my thoughts on the state of React in 2023 and beyond!
React has come a long way in the last 5 years or so, and has captured the market of web development and some of mobile development (with React Native), in both large and small companies. It has become the go to library to build web applications, and has gained consistent popularity over the years.
The recent State of JS Survey of 2022, has many interesting findings. The chart below shows the positive/negative sentiment split of those using various frontend frameworks.
Close to 60% of the respondents have voted to use React again!
Notice how React is on the very top with the most number of respondents, and has quite a positive feedback. Close to 60% of respondents have voted to use React again! This is huge in comparison to the other frameworks! This goes to show that React has been a top choice among developers for several years in a row now!
So let’s talk about how React has evolved over the years the discuss its future direction as well.
Server Components
We have always used React with client-side rendering for years now. This means, the components live within the client, and most of the the state and logic lives within the client app.
This also led to rise of several state management libraries like Redux, because state management was the single largest challenge while building apps with so much logic and state within it on the client side.
With React 18, there is an upcoming feature that allows developers to build apps that can move logic over to the server, using Server components. This is the next big step in React, where we are now thinking about going towards a complete framework that offers Server Side Rendering or a combination of Server and Client Side Rendering, using server components.
This feature is still experimental in React 18, but frameworks such as Next.js, have taken this one step further and released React Server Components, within their /app directory which is in Beta.
Moving Towards React Frameworks: Next.js / Remix
React is still a UI library that helps you build client side UI. But the shift is now towards building more complex full stack applications using React frameworks such as a Next.js or Remix. A few years ago these did not exist!
These frameworks help you build full stack web applications, with more code on the server, while still using React to build rich UI on the client-side. With these frameworks you can now use different rendering mechanisms such as Server Side Rendering, Incremental Static Generation and traditional Client Side Rendering on a page by page basis. This means you can start to move more complex code and logic to the server, while keeping your client simple and UI focused.
Applications built with these React frameworks tend to be much more performant, since there is less JavaScript on the client-side now and the server does much more heavy lifting work.
This results in seamless UI, less JavaScript code to run on the client, getting away from state management libraries, since the apps are now simpler.
So React is the baseline library, but now you can tap into these frameworks that use React and enhance your applications to build production ready full stack applications. The two popular React frameworks today are Next.js and Remix, let’s take a brief look at their features below:
Next.js Features
Here are some Next.js features that come out of the box:
Hybrid Rendering
Next.js allows you to render your content in different ways depending on your application’s needs. You could opt for pre-rendering with Server-side Rendering, or Static Generation. You can also create or update content at run-time using Incremental Static Generation. What’s neat about this feature is that it can be chosen on a page by page basis. You can opt for any type of rendering, based on the use-case.
Built-in Optimization
Next.js supports several optimizations to improve performance of your web application out of the box. It provides automatic optimizations with the Image and Font component, resulting in improved UX with faster loading times.
File-based Routing
Next.js provides file-based routing that is built on top of the React Server components. It supports, nested routes, layouts, loading states, and error states. This is an intuitive style of routing, based on files and folder structure. You do not need to install additional routers while using Next.js.
Remix Features
Remix offers very similar features as Next.js, and it is hard to say which one is better than the other. Remix also believes in decreasing the amount of stuff you send over the network. Less JavaScript, less JSON, less CSS. This means more code moved to the server, and Remix is a framework that you can utilize to do just that with React in the frontend.
Nested Routing
Through nested routing, Remix can eliminate almost all the loading states of your page. This makes your app perform faster, with very few wait times.
Pre-fetching
Remix also supports pre-fetching of data before the user clicks on something. It can pre-fetch public data, user data, module and even CSS. Isn’t that cool
Transitions
Remix handles all loading states in your app automatically. This is built in to Remix, with no need for external libraries
Hooks and Functional Components
Alright, we talked about Server components, and the popular frameworks that you can utilize to build full stack web applications today with React. Now back to some of the React specific updates.
Class components are dead for all practical purposes for a while now. Almost all new React code now should be written using functional components. And with functional components comes support for hooks.
With the release of React 18, there are some additional hooks that have been introduced. Most of them are related to improved performance in rendering the UI.
You can check them out here: https://reactjs.org/blog/2022/03/29/react-v18.html
So it is clear that React has completely moved away from the old Class Components, and if you are a newbie React developer, you don’t have to waste your time learning anything about React Class components. You can directly start using the functional components and hooks!
Final Thoughts
It is clear to me now that React still serves the purpose of a UI library that can be used to build frontend applications. But it has opened itself up to potentially building full stack, highly performant web applications, by utilizing meta frameworks such as Next.js, Remix and others.
This opens up a huge market for React today, and has already been adopted by several big names. React isn’t going anywhere, but it is a good time to start learning frameworks such as Next or Remix to start building complex apps with React with all the built-in support that comes from these frameworks!
Resources
Alright folks, that’s a wrap! Hope you enjoyed this article! Here are some resources that will come handy in your journey to learn React:
You can also check out my latest course on Next.js 13 on Pluralsight below:
This course covers the fundamentals of Next.js 13, and also teaches you to build a demo app using the new /app directory and teaches the beta concepts of Server Components.
For more info visit:
You can also follow me on Twitter: @AdhithiRavi
This article was originally published in https://programmingwithmosh.com/
