Introduction

React is widely used for building both web and mobile applications through React Web and React Native. One of its key features is Reconciliation, the process that determines how changes in the component state or props reflect in the UI efficiently.

With the release of React Native 0.76, the architecture has significantly changed, moving away from the old bridge system to a more performant Fabric and TurboModules architecture. This brings notable differences in how reconciliation works compared to previous versions of React Native and React Web.

In this article, we’ll compare reconciliation in React Web and React Native 0.76 (New Architecture), highlighting key differences, improvements, use cases, and optimization techniques.

What is Reconciliation in React?

Reconciliation is the algorithm React uses to efficiently update the UI in response to changes in component state or props. It minimizes unnecessary re-renders by identifying differences between the current and previous virtual DOM (in React Web) or virtual tree (in React Native).

Key Steps in Reconciliation:

  1. Rendering the Virtual Representation: React creates a virtual representation of the UI.
  2. Diffing Algorithm: React compares the new virtual representation with the previous one to identify changes.
  3. Efficient Updates: Only the necessary changes are applied to the real DOM (React Web) or native views (React Native).

Reconciliation in React Web vs React Native (0.76)

React Web:

  • Uses the Virtual DOM, a JavaScript object representation of the HTML DOM.
  • Updates the real DOM in the browser.
  • Optimizes performance through efficient DOM updates but can be constrained by browser limitations.
  • Batches updates to avoid excessive DOM manipulation.
  • Uses synthetic events managed within the browser environment.
  • Animations are executed in JavaScript (less performant) or via CSS.

React Native 0.76 (Fabric):

  • Uses a Virtual Tree, a JavaScript object representation of native UI views.
  • Updates native views via Fabric, the new rendering pipeline.
  • Eliminates the bridge bottleneck by using a direct-to-native threading model.
  • Enables synchronous layout updates for improved UI responsiveness.
  • Uses Fabric’s concurrent event handling, reducing UI lag.
  • Animations now utilize JSI-powered native animations, improving FPS and responsiveness.

Optimizing Reconciliation in React Web and React Native 0.76

Use key in Lists

Keys help React efficiently track changes in lists. This applies to both React Web and React Native. Incorrectly managing keys can result in unnecessary re-renders and degraded performance.

const items = [{ id: 1, name: "Item 1" }, { id: 2, name: "Item 2" }];

return (
  <FlatList
    data={items}
    keyExtractor={(item) => item.id.toString()}
    renderItem={({ item }) => <Text>{item.name}</Text>}
  />
);

Use React.memo and PureComponent

Memoization prevents unnecessary re-renders in both React Web and React Native by ensuring components only update when their props change.

const MemoizedComponent = React.memo(({ name }) => {
  return <Text>{name}</Text>;
});

Leverage Synchronous Updates in Fabric (React Native Only)

Fabric’s synchronous updates significantly improve performance by reducing UI lag. Ensure your components are structured to take advantage of these updates and avoid unnecessary state updates.

Use JSI-based Native Modules (React Native Only)

JSI (JavaScript Interface) allows for direct interaction with native code, bypassing the old bridge, reducing the performance overhead, and making state updates more efficient.

import { NativeModules } from 'react-native';
const { MyNativeModule } = NativeModules;

MyNativeModule.performNativeTask();

Use Concurrent Event Handling (React Native Only)

Fabric introduces a concurrent event system that reduces bottlenecks during UI interactions. Use event listeners that fully utilize Fabric’s improved event handling model.

const handlePress = useCallback(() => {
  console.log("Button pressed");
}, []);

<Button onPress={handlePress} title="Press Me" />;

Optimize Animations Using the Native Driver (React Native Only)

React Native’s JSI-based native driver allows for animations to run smoothly without blocking the JavaScript thread. Always use useNativeDriver: true where possible.

Animated.timing(animatedValue, {
  toValue: 1,
  duration: 500,
  useNativeDriver: true, // Runs animation on the native thread
}).start();

Batch State Updates

React automatically batches multiple state updates into a single re-render cycle, reducing performance overhead in both React Web and React Native.

setState1(value1);
setState2(value2);
// React optimizes and processes both updates together.

Profile and Optimize Performance Using React DevTools

For React Web, use React DevTools to analyze component re-renders. For React Native, use Flipper to monitor performance bottlenecks and improve reconciliation efficiency.

Conclusion

With React Native 0.76, reconciliation has evolved significantly compared to previous versions, moving away from the traditional bridge-based architecture. Fabric, TurboModules, and JSI have made UI updates faster, reducing bottlenecks that existed in earlier versions.

In contrast, React Web still relies on the Virtual DOM, which, while optimized, does not achieve the same level of native performance improvements seen with Fabric.

By understanding the differences, use cases, and optimizations available in React Web and React Native 0.76, developers can build highly performant applications tailored to their respective platforms.

If you have experience optimizing reconciliation with React Web or React Native 0.76, share your insights in the comments below!

Happy coding! 🚀

Author Of article : Sagnik Ghosh Read full article