React Native 2024 New Architecture Improved
React Native has an ever growing community, which not only fosters interaction and collaboration, but also supports ongoing development.
This 2024 brings new features that are paramount to bear in mind, it’s May already!
Caveat
But remember, this new architecture is still being tested, if you want to explore it… be free, but to use it in solid development, wait ’til release.
Why React Native
Simple: It’s faster, scalable and it has native code in it.
Redesign the core internals for high quality experience. Default experience and redefining.
Meta, Shopify and Amazon interested in making react native from good to great.
Synchronous layout and effects
Firstly, we need to acknowledge that adjusting layout might hinder user experience and interaction when changing from mobile to web and viceversa.
Moreover, state updates within the onLayout
So, 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} />
</>
);
}Support for Concurrent Renderer and Features
You can now use features like Suspense for data-fetching, Transitions, and other new React APIs in your React Native code.
The concurrent renderer presents improvements like 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 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 so as to ensure 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>
)
}JavaScript/Native Interfacing
It presents JSI as an interface which enables JavaScript to hold a reference to a C++ object and vice-versa. You can directly invoke methods without serialization costs.
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.
This includes initializing and re-rendering native core components like View and Text.
Dive in!
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.
Go for the New Architecture in React Native
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!
Effectus Software and React Native
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 in curated experiences in multi-media. More simply, we open spaces for deep thinking.
Rounding up on React Native
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!