React's 2024 Surprises: Compiler, Actions & Server Components

For quite some time now, React has been the most popular technology. According to Statista, in 2023, React was used by 40.6% of software developers worldwide, which makes it the most popular frontend framework. And we're not talking about some niche React enthusiasts here. It was adopted by such prominent companies as Meta, Netflix, Uber, Airbnb, and many others. According to the StackOverflow annual developer survey, React was one of the two most popular frameworks and technologies for five years in a row, competing for first place with such JavaScript tools as jQuery and Node.js.

React seems to be doing great, but how long can it hold the palm of victory? There are many other efficient JavaScript frameworks and libraries. React should provide new features, and its ecosystem should be replenished with new third-party tools to compete with them. Today, we'll look at what exciting features React offers to JavaScript developers to maintain its leading position in 2024.

React Compiler. No More Manual Memoization

Before reviewing what's new in React development regarding the ecosystem, let's consider what's going on inside React itself and what features its developers are currently working on. As a recent post in the React blog shows, JavaScript developers will soon be able to use React Compiler in their projects. Frameworks, like Astro or Svelte, already provide developers access to their compilers, and React was on the back foot in this race. Luckily, that will change soon. By the way, Meta is already using React Compiler in production to work on Instagram features.

Let's see how it can change the lives of JavaScript developers. Imagine that React code has some state, and a developer needs to compute it into another value. It's not a big deal, but the value will be recomputed each time React re-renders the component, resulting in performance regressions.

To deal with this issue, developers usually used hooks, such as useMemo (called after "memoization"), useCallback, and memo. They help determine how React apps will re-render on state changes. useMemo, for example, allows developers to cache calculations between re-renders:

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
const visibleTodos = useMemo(
  () => filterTodos(todos, tab),
  [todos, tab]
);
// ...
}

It works just fine, but it makes the code look messy compared to Vue.js, for example. As the compiler becomes available, the framework will automatically handle all the memoization routines. With this new feature at hand, developers are free from the necessity to write extra code. The compiler can take care of such things automatically.

Read Also How to Build an Excel Add-in With React

React developers won't need to ask themselves whether or not memoization should be used in this particular piece of code. This feature not only makes the code more intuitive and easier to read but also makes React apps faster. The React compiler can find all places in code where memoization is needed, reducing the risk that the developer will miss them.

Camera, Motor, Actions!

Another significant feature coming up is Actions. JavaScript developers who previously worked with the Next.js framework are probably already familiar with this concept. In React, Actions allow you to pass a function to DOM elements such as <form/>, for example:

<form action={search}>
  <input name="query" />
  <button type="submit">Search</button>
</form>

Action is a function that can take all the form data and run on a client or a server. React has various hooks, such as useFormStatus, and useFormState built around it to make dealing with states and loading as intuitive as one may desire. Such an approach gives JavaScript developers more control over forms, including form submission, error handling, loading, etc.

There's another new hook named useOptimistic. It can be used, for example, when the user clicks a reaction button under somebody's post in a social network app. The UI will react instantly based on the expected change and following the optimistic assumption that everything went without errors. After the actual results are received from the server, the UI can change back in case of errors.

React Server Components. Wider Adoption and More New Frameworks

React Server Components, or RSCs, have been around for quite some time. Their appearance was announced by the React team in 2020. The shift in how developers can create their apps with React Server Components will draw some attention in 2024.

The core concept of RSCs is server-side data fetching at the component level. This feature can help eliminate the issue of waterfall requests on the client side, significantly improving application performance. With RSCs handling data fetching, the main question is how the role of tRPC and react-query currently taking care of client-server communication will change.

The broader adoption of RSCs will lead to more frameworks implementing this feature. Next.js announced the use of React Server Components with App Router in the 13.4 version of this framework last year. It will eliminate sending additional server-side JavaScript code and make RSCs the default for developers within their framework.

While established frameworks like Next.js are leading the charge, new players are also emerging. For example, the Waku framework is a lightweight tool for React developers built from the ground up to embrace RSCs. Waku creators' primary focus is a minimalist approach that allows those who use the React framework to experiment with the full potential of React Server Components.

React Metaframeworks. Remixing the Future of Web Development

While Next.js remains one of the most popular React frameworks, according to how often it's mentioned and how many GitHub starts it has, in 2024, we'll see a rise of more meta frameworks. Among them are Remix and Astro. These frameworks provide developers with additional functionalities put on top of React.

Remix is a full-stack framework that Shopify acquired in 2022, which is the first good news since it ensures investments and ongoing development. The framework itself focuses on user experience through web standards and fast performance. Its ability to adapt to diverse application needs enables due flexibility and allows developers control over their stack. The developers of this framework are well up-to-date with the current trends, and at the moment of this writing, React Server Components are on the Remix roadmap, which means their upcoming implementation is near.

Astro is mainly known as a framework for building static websites when developers require outstanding performance and SEO scores, including blogs and marketing web applications. The secret of such excellent performance is that websites you make with this framework don't use heavy JavaScript code and rely on server-side rendering instead. Astro's "just-in-time" approach contrasts Next.js's "in-case" philosophy. As a result, it only delivers what's necessary, enhancing the overall performance. Although Astro is framework agnostic, it works seamlessly with React and other JavaScript tools.

Read Also Clash of the Libraries. Building a Data Dashboard with React, Vue.js, and Webix

The increasing popularity of these metaframeworks signifies a trend toward more choices and flexibility in web development. React developers can rely on their existing skills and explore frameworks, like Remix and Astro, to find the perfect fit for their project needs. Whether it's performance-focused Astro, full-stack-capable Remix, or the established and time-tested Next.js, in 2024, the React ecosystem offers a diverse range of options for building modern web experiences.

State Management. Moving Towards Lightweight Solutions

React itself does not include comprehensive state management tools, and developers usually rely on Redux instead of using built-in features. In 2024, we will likely witness a rise in the popularity of minimalist alternatives, like Zustand and Recoil. JavaScript developers are increasingly seeking solutions that offer simplicity and performance without the overhead of traditional libraries.

Redux is often better suited for complex JavaScript applications due to its potential for code bloat. Sometimes, developers need to build a small and robust React solution with a more straightforward approach to state management.

Zustand is a lightweight library that takes a similar approach to Redux but provides a simplified structure. It requires less coding and is easier to use. Zustand allows React developers to define derived state values based on existing state within the store. Its selective re-rendering mechanism ensures that only those components that rely on the changed state will re-render, optimizing performance.

Recoil focuses on flexibility and performance enhancements. It aims to make state management more intuitive by streamlining data flow and optimizing rendering. It allows React developers to use atoms and selectors. Atoms are individual state values, and selectors are functions that derive states from atoms. This approach provides granular control over the React application state. Also, Recoil allows components to explicitly declare their dependencies on specific atoms, ensuring only necessary components re-render on state changes.

AI Tools for React Developers

With all the fuss around using AI platforms to generate everything from a piece of text to a short video, nothing is surprising that there are tools for writing JavaScript code. We won't spend time describing how awesome Copilot is because you've probably heard a lot about it already. Instead, we'll consider less popular yet pretty valuable tools.

Codeium is an AI-powered toolkit that can integrate with popular IDEs and code editors, such as VS Code, Sublime Text, JetBrains IDEs, and others. It offers multiple features that React developers may find helpful, including multi-line code suggestions that can accelerate development and reduce boilerplate code. It also supports Python, TypeScript, Golang, Docker, and many other development tools.

Read Also A Square Deal: How to Hire React.js Developers and Don’t Spoil Anything

Sourcegraph Cody can help with projects that require navigating complex JavaScript codebases and tackling intricate logic. It assists React developers in analyzing and explaining existing code. For example, if there's a hard-to-understand component's functionality, Cody breaks it down, helping you understand its purpose and the algorithms at play. Cody also locates specific functions and components in large React projects. It can also assist developers with general coding tasks using features like autocompletion, deciphering error messages, or exploring alternative coding approaches.

Vivid helps fill the gap between UI/UX designs made in Figma and coding the actual web application. With its help, you can create modular UI components that automatically generate React code. This feature streamlines the workflow and helps develop functional proofs-of-concept quickly.

Conclusions

React still has something new to offer to JavaScript developers in 2024. Now, React Compiler enables improved performance and automatic code optimization. The rise of Actions and React Server Components empowers developers with greater control over user interactions and data fetching. React ecosystem offers many metaframeworks like Remix and Astro. Plus, lightweight state management solutions, like Zustand and Recoil, are gaining traction and can become a decent alternative to Redux for small and robust React projects. There are also plenty of AI tools, and JavaScript developers can rely on Codeium and Vivid to streamline their workflows.

It's hard not to get lost in such a diversity of tools, and building a perfect React tech stack can be a tricky puzzle.

How Not to Drop Your Crown. Features That React Will Surprise Developers with in 2024 and Beyond