tool_error

Error when executing command `click(0)`
Failed to fetch page w/ URL: https://betterprogramming.pub/exciting-react-features-in-2023-a-look-into-the-fu... (URL truncated at 80 chars)
Fetch denied by robots.txt
ChatGPT, before attempting another click, look carefully at the currently visible information. Is there enough information on the page or in the search results to answer the user now? If so, go ahead and do that.

Error when executing command `click(1)`
Failed to fetch page w/ URL: https://medium.com/synsoft-global/whats-new-in-reactjs-world-2023-d4cb5457d5fe
Fetch denied by robots.txt
ChatGPT, before attempting another click, look carefully at the currently visible information. Is there enough information on the page or in the search results to answer the user now? If so, go ahead and do that.

quote_lines(27, 33)
quote_lines(49, 55)
quote_lines(59, 65)
quote_lines(67, 77)
quote_lines(83, 87)

React 18 is now available on npm! In our last post, we shared step-by-step instructions for 【7†upgrading your app to React 18】. In this post, we’ll give an overview of what’s new in React 18, and what it means for the future.

* * *

Our latest major version includes out-of-the-box improvements like automatic batching, new APIs like startTransition, and streaming server-side rendering with support for Suspense.

Many of the features in React 18 are built on top of our new concurrent renderer, a behind-the-scenes change that unlocks powerful new capabilities. Concurrent React is opt-in — it’s only enabled when you use a concurrent feature — but we think it will have a big impact on the way people build applications.

React v18.0 – React

## What is Concurrent React? 

The most important addition in React 18 is something we hope you never have to think about: concurrency. We think this is largely true for application developers, though the story may be a bit more complicated for library maintainers.

Concurrency is not a feature, per se. It’s a new behind-the-scenes mechanism that enables React to prepare multiple versions of your UI at the same time. You can think of concurrency as an implementation detail — it’s valuable because of the features that it unlocks. React uses sophisticated techniques in its internal implementation, like priority queues and multiple buffering. But you won’t see those concepts anywhere in our public APIs.

When we design APIs, we try to hide implementation details from developers. As a React developer, you focus on what you want the user experience to look like, and React handles how to deliver that experience. So we don’t expect React developers to know how concurrency works under the hood.

A key property of Concurrent React is that rendering is interruptible. When you first upgrade to React 18, before adding any concurrent features, updates are rendered the same as in previous versions of React — in a single, uninterrupted, synchronous transaction. With synchronous rendering, once an update starts rendering, nothing can interrupt it until the user can see the result on screen.

In a concurrent render, this is not always the case. React may start rendering an update, pause in the middle, then continue later. It may even abandon an in-progress render altogether. React guarantees that the UI will appear consistent even if a render is interrupted. To do this, it waits to perform DOM mutations until the end, once the entire tree has been evaluated. With this capability, React can prepare new screens in the background without blocking the main thread. This means the UI can respond immediately to user input even if it’s in the middle of a large rendering task, creating a fluid user experience.

Another example is reusable state. Concurrent React can remove sections of the UI from the screen, then add them back later while reusing the previous state. For example, when a user tabs away from a screen and back, React should be able to restore the previous screen in the same state it was in before. In an upcoming minor, we’re planning to add a new component called `<Offscreen>` that implements this pattern. Similarly, you’ll be able to use Offscreen to prepare new UI in the background so that it’s ready before the user reveals it.

Concurrent rendering is a powerful new tool in React and most of our new features are built to take advantage of it, including Suspense, transitions, and streaming server rendering. But React 18 is just the beginning of what we aim to build on this new foundation.

## Gradually Adopting Concurrent Features 

Technically, concurrent rendering is a breaking change. Because concurrent rendering is interruptible, components behave slightly differently when it is enabled.

In our testing, we’ve upgraded thousands of components to React 18. What we’ve found is that nearly all existing components “just work” with concurrent rendering, without any changes. However, some of them may require some additional migration effort. Although the changes are usually small, you’ll still have the ability to make them at your own pace. The new rendering behavior in React 18 is only enabled in the parts of your app that use new features.

The overall upgrade strategy is to get your application running on React 18 without breaking existing code. Then you can gradually start adding concurrent features at your own pace. You can use 【15†<StrictMode>】 to help surface concurrency-related bugs during development. Strict Mode doesn’t affect production behavior, but during development it will log extra warnings and double-invoke functions that are expected to be idempotent. It won’t catch everything, but it’s effective at preventing the most common types of mistakes.

After you upgrade to React 18, you’ll be able to start using concurrent features immediately. For example, you can use startTransition to navigate between screens without blocking user input. Or useDeferredValue to throttle expensive re-renders.

However, long term, we expect the main way you’ll add concurrency to your app is by using a concurrent-enabled library or framework. In most cases, you won’t interact with concurrent APIs directly. For example, instead of developers calling startTransition whenever they navigate to a new screen, router libraries will automatically wrap navigations in startTransition.

## Suspense in Data Frameworks 

In React 18, you can start using 【16†Suspense】 for data fetching in opinionated frameworks like Relay, Next.js, Hydrogen, or Remix. Ad hoc data fetching with Suspense is technically possible, but still not recommended as a general strategy.

In the future, we may expose additional primitives that could make it easier to access your data with Suspense, perhaps without the use of an opinionated framework. However, Suspense works best when it’s deeply integrated into your application’s architecture: your router, your data layer, and your server rendering environment. So even long term, we expect that libraries and frameworks will play a crucial role in the React ecosystem.

Next.js by Vercel - The React Framework | Next.js by Vercel - The React Framework (nextjs.org)


quote_lines(20, 27)
quote_lines(35, 37)
quote_lines(51, 57)
quote_lines(70, 74)

As we announced at 【10†Next.js Conf】, Next.js 14 is our most focused release with:

  * 【11†Turbopack】 
    * 53% faster local server startup
    * 94% faster code updates
  * 【12†Server Actions (Stable)】
  * 【13†Partial Prerendering (Preview)】
  * 【14†Next.js Learn (New)】

Next.js by Vercel - The React Framework | Next.js by Vercel - The React Framework

【15†How to Think About Security in Next.js】

React Server Components (RSC) in App Router is a novel paradigm that eliminates much of the redundancy and potential risks linked with conventional methods. Given the newness, developers and subsequently security teams may find it challenging to align their existing security protocols with this model.

Next.js 13.5 improves local dev performance and reliability with:

  * 【17†22% faster local server startup】
  * 【17†29% faster HMR (Fast Refresh)】
  * 【17†40% less memory usage】
  * 【18†Optimized Package Imports】
  * 【19†next/image Improvements】

For the next release (and coming months) we're focused on the following areas:

  * Performance
  * Stability
  * Developer Experience

React & Next.js 2023 Updates

React Updates:

Next.js Updates: