React Native 2024 New Architecture Improved

Simple: It’s faster, scalable, and has native code.

As React Native continues to evolve, businesses are increasingly adopting it as a foundation for scalable mobile solutions. Leveraging Cross-Platform App Development Services allows teams to take full advantage of this framework while ensuring consistent performance, faster delivery, and maintainability across multiple platforms.

Redesign the core internals for a high-quality experience. Default experience and redefining.

Meta, Shopify, and Amazon are interested in making react native from good to great.

Firstly, we need to acknowledge that adjusting the layout might hinder user experience and interactions when switching between mobile and web.

Moreover, state updates within the onLayout callback may apply, users may see intermediate states or visual jumps between rendering the initial layout and responding to layout measurements.

So, with New Architecture, we can avoid this issue entirely, making no intermediate state visible to users.

In the current architecture, we use onLayout to get the measurements of the view and then update the positioning of the tooltip based on where the view is.

function ViewWithTooltip() {
  // ...

  // We get the layout information and pass to ToolTip to position itself
  const onLayout = React.useCallback(event => {
    targetRef.current?.measureInWindow((x, y, width, height) => {
      // This state update is not guaranteed to run in the same commit
      // This results in a visual "jump" as the ToolTip repositions itself
      setTargetRect({x, y, width, height});
    });
  }, []);

  return (
    <>
      <View ref={targetRef} onLayout={onLayout}>
        <Text>Some content that renders a tooltip above</Text>
      </View>
      <Tooltip targetRect={targetRect} />
    </>
  );
}

With the New Architecture, we can use useLayoutEffect to synchronously measure and apply layout updates in a single commit, avoiding the visual “jump”.

function ViewWithTooltip() {
  // ...

  useLayoutEffect(() => {
    // The measurement and state update for `targetRect` happens in a single commit
    // allowing ToolTip to position itself without intermediate paints
    targetRef.current?.measureInWindow((x, y, width, height) => {
      setTargetRect({x, y, width, height});
    });
  }, [setTargetRect]);

  return (
    <>
      <View ref={targetRef}>
        <Text>Some content that renders a tooltip above</Text>
      </View>
      <Tooltip targetRect={targetRect} />
    </>
  );
}

You can now use features like Suspense for data-fetching, Transitions, and other new React APIs in your React Native code.

The concurrent renderer introduces improvements such as automatic batching, reducing re-renders in React.

With the New Architecture, you’ll get automatic batching with the React 18 renderer.

You can find a clear example here in automated batching!

New features in React’s new Architecture, such as Transitions, enable you to express the priority of UI updates.

Labeling an update as lower priority tells React it can “interrupt” rendering the update to handle higher-priority updates, ensuring a responsive UX.

Let’s showcase how transitions can interrupt in-progress rendering to handle a newer state update.

Now wrap the tile number state update with startTransition to indicate that rendering the tiles can be interrupted. startTransition also provides a isPending flag to tell us when the transition is complete.

function TileSlider({value, onValueChange}) {
  const [isPending, startTransition] = useTransition();

  return (
    <>
      <View>
        <Text>
          Render {value} Tiles
        </Text>
        <ActivityIndicator animating={isPending} />
      </View>
      <Slider
        value={1}
        minimumValue={1}
        maximumValue={1000}
        step={1}
        onValueChange={newValue => {
          startTransition(() => {
            onValueChange(newValue);
          });
        }}
      />
    </>
  );
}

function ManyTiles() {
  const [value, setValue] = useState(1);
  const tiles = generateTileViews(value);
  return (
      <TileSlider onValueChange={setValue} value={value} />
      <View>
        {tiles}
      </View>
  )
}

It presents JSI as an interface that enables JavaScript to hold a reference to a C++ object and vice versa. You can invoke methods directly without serialization overhead.

JSI enables VisionCamera, React Native good fellow, to process frames in real time. Typical frame buffers are 10 MB, which amounts to roughly 1 GB of data per second, depending on the frame rate.

JSI adoption in the New Architecture removes this class of serialization work from all native-JavaScript interop.

Another key aspect of performance optimization in this ecosystem involves using Hermes engine with the new architecture, which helps reduce app startup time, improve memory usage, and enhance overall execution efficiency in React Native applications.

This includes initializing and re-rendering native core components like View and Text.

Check out the documentation in the New Architecture working group.

Today, the New Architecture is experimental and still working for a better adoption experience.

The team plans to enable the New Architecture by the end of 2024. So be on top of it!

React Natives Community guidance is as follows

• For most production apps, we do not recommend enabling the New Architecture today. Waiting for the official release will offer the best experience.
• If you maintain a React Native library, we recommend enabling it and verifying your use cases are covered. You can find the instructions here.

You can find instructions in our dedicated working group, so you can start exploring!

The New Architecture working group is a dedicated space for support and coordination for New Architecture adoption and where the team posts regular updates.

Keep yourself in the loop!

The Humane Space is an app that combines education and wellness, giving users a different take on lifelong learning.

• Our goal is to give adults a daily dose of wonderment, awe, and interdisciplinary understanding of big questions like What is our relationship to the sky?
• What is the impact of community gardening?
• How does literature impact the economy?

Capturing the imagination, we unpack complex ideas through curated multimedia experiences. More simply, we open spaces for deep thinking.

So, react native is here to stay and slay!

All in all, optimizing React Native’s use is essential to creating a fast, responsive, and user-friendly mobile app. Here you’ll find more tips.

Go browse our blog and Instagram for improving optimization: Splash Screens in React, animations, vision camera, video, image picker, vector icons and maps!

Keep on reading our latest for more and comment, remember: Sharing is Caring!