Forem: MonicaAcha2103

What's next in React Native ? ( 2022 and beyond )

MonicaAcha2103 — Sat, 27 Aug 2022 17:23:00 +0000

Versions:

Version 0.68- is the release version to opt in switch for new architecture. This makes the new architecture open to early adopters.

Version 0.69 [LATEST]- is the first release to support React 18. It is enabled by default. You can opt out of react 18 by changing one line.

To know more about react 18, check out my previous blog post
https://dev.to/monicaacha2103/all-you-need-to-know-about-react-18-dbc.

Version 0.70 [NEXT] : this version will ship with Hermes as the default engine.
We can expect new architecture to be released in upcoming versions.

Legacy architecture [< v0.70]

Native Code: Most of the iOS native code is written in Swift/Objective C . Likewise, Android native is written in Java/Kotlin.
Javascript VM: The virtual machine that runs all the javascript code.

iOS- React Native uses JavaScriptCore provided by the iOS platform

Android - React Native bundles the JavaScriptCore along with the application. This increases the app size. Hence the Hello World application of RN would take around 3 to 4 megabytes for Android.

Web (Chrome) - In case of Chrome debugging mode, the JavaScript code runs within Chrome itself (instead of the JavaScriptCore on the device) and communicates with native code via WebSocket. Here, it will use the V8 engine.

Three main fundamentals- Threading Model, Bridge and UI Native Module

React Native Bridge- React Native bridge is a C++/Java bridge which is responsible for communication between the native and Javascript thread. A custom protocol is used for message passing. It serializes all the data that has to be passed from JS layer to native layer. The native layer then deserializes the data and performs required operations- what views to load, what information is to be retrieved from the hardware, etc.
UI Modules- Native module that maps JSX Views onto Native Views.
Threading Model-
When a React Native application is launched, it spawns up the following threading queues-

Main thread (Native Modules) - This is the main thread which gets spawned as soon as the application launches. It loads the app and starts the JS thread to execute the Javascript code. The native thread also listens to the UI events like 'press', 'touch', etc. These events are then passed to the JS thread via the RN Bridge. Once the Javascript loads, the JS thread sends the information on what needs to be rendered onto the screen.
Shadow thread - This information is used by a shadow node thread to compute the layouts. The shadow thread is like a mathematical engine which finally decides on how to compute the view positions. These instructions are then passed back to the main thread to render the view.
Javascript thread - The Javascript Queue is the thread queue where main bundled JS thread runs. The JS thread runs all the business logic, i.e., the code in React Native.
Custom Native Modules - Apart from the threads spawned by React Native, we can also spawn threads on the custom native modules we build to speed up the performance of the application. For example - Animations are handled in React Native by a separate native thread to offload the work from the JS thread.

Limitations of Old Architecture-
Asynchronous, Single threaded , Data Serialization costs when using Bridge

New Architecture [v0.70 onwards]-

Hermes Engine -

One of the crucial point of the new architecture rollout is the adoption of the new JavaScript engine- Hermes. React Native 0.70 will ship with Hermes as the default engine. Can be opted out if there is a need to use older VMs like JavascriptCore.

JavaScript Interface -

The communication between JavaScript and the VM is being standardized using a JavaScript Interface (JSI). JSI makes it possible for Native components and JS to communicate with each other. It replaces the React Native Bridge.

Turbo Modules -
TurboModules are the next iteration on Native Modules.It speeds up the way Native Modules are initialised and invoked from JavaScript. It addresses the async and loading issues because they behave in a synchronous way in JavaScript and lazy load into memory, allowing the app to start faster.

Codegen -
Codegen addresses the problem with type safety, because it allows us to generate interfaces we can use to make sure our native code stays in sync with the data we are passing in from the JavaScript layer.

Fabric -
The new architecture uses a new rendering system, Fabric Renderer which has improvements in the rendering layer i.e UI's responsiveness.

Fabric Components are the preferred way to create reusable UI components, providing a native experience to the users. This will help reduce the overload of application architectures, and your applications will run faster than older cross-platform ones.

Fabric uses JSI to expose methods to JavaScript code. This will help reduce the overload of application architectures, and your applications will run faster than older cross-platform ones.

Fabric uses a single thread , will help the UI to communicate via callbacks via JavaScript.

We've often seen cross-platform applications struggle with the gap between shared code and native environments. To improve the flow of data and debug such errors, you need your own bridges. Fabric will provide a simplified native bridge between JS and frameworks.

Improvements in the new architecture -

Efficient communication between JS and OS platforms
Improved user experience through highly reactive user interfaces
Better code sharing with debugging capabilities
Fast loading of mobile applications
Synchronous Executions
Faster build
Concurrency
Less overhead of data serialization
Type Safety

All you need to know about React 18

MonicaAcha2103 — Sun, 10 Apr 2022 10:59:03 +0000

ReactJS is the highly used open-source JavaScript Library which makes building dynamic websites easier. This blog post mainly focuses on the latest changes in React's newest version. A prior knowledge of React and its fundamentals is necessary to understand it to the fullest.

Updates on Client Side

Things to update to support the new version.
Updating from React 17 to 18 doesn't involve any breaking changes.

Install package
npm install react@18 react-dom@18
ReactDOM.render is no longer supported in React 18. Use the new createRoot API instead.

~~reactDOM.render(<App />,document.getElementById(‘root’));~~

import ReactDOM from 'react-dom/client';
import App from './App';

const root = 
ReactDOM.createRoot(document.getElementById('root');
root.render(</App>);

Changes in Render callback

The render callback is removed from the new root API. But
we can pass it as a property to the root component.
root.render(</App callback={() => console.log("rendered")}>);

Updates on Server Side

There are some updates on react-dom/server API's to support suspense and streaming the server side page
~~renderToString(React.Node)~~
renderToPipeableStream(React.Node, options)

Improvements

1. Automatic Batching support for async calls

What is batching?
Multiple setState calls gets combined together and then re-render only once.

Why is it needed?
Fewer re-renders for better performance.

Before this update, the automatic batching was applied to all state updates in React event handlers. But after the update, it supports async functions as well.
For the below snippet, the re-render would happen thrice. But with the update, it groups and re-render only once.

 fetch('/someapi').then() => {
   setIsFetching(false);
   setError(null);
   setFormStatus('success')
 });

Can we opt out of automatic batching?
YES. Usually, batching is safe, but some code may depend on reading something from the DOM immediately after a state change. For those use cases, you can use ReactDOM.flushSync() to opt out of batching.

import { flushSync } from ‘react-dom’;

flushSync(() => {
 // wraps state updates 
});

2. Support for Suspense in Server Side Rendering (SSR)

What is SSR?
A technique were you render the HTML output of your React component and send the HTML from the server. So that the user has some UI to look at while the Javascript bundles are loading and before it becomes interactive.  

What is Suspense?
Suspense is a concept to show a placeholder/ fallback component until the component is ready.

<Suspense fallback={<Loader/>} > 
  <Component />
</Suspense >

Before v18, Suspense was introduced into react in 16.6v (2018) limiting only to client-side .On server side, it would render all or nothing to the user, impacting the performance.
After v18, It provides support to render the website faster and improves the initial load time.

3. Concurrency

What is Concurrency ?
Simply means interrupting an ongoing task.
We can tell React which updates are less urgent and can be delayed.
Urgent state updates can be prioritised over less priority updates.

Previously state updates order in which they were triggered.
With v18, we can change the priority using new API's called Concurrent Features-
1. useTransition()
  Used in functional components .
If there are 2 consecutive state updates, it may block the rendering of the UI, if the any of the update is expensive . So we can lower the priority of the state updates by wrapping them in useTransition

const [isPending, startTransition] = useTransition();

setInputValue(value); 
startTransition(() => {
//less priority
 setResult(results);
});
...
return (isPending && <Spinner />);

2. useDeferredValue()  -

Tell React to show older value, until the new value is ready  similar to startTransition but cannot be used in cases where you don’t have full control over state update. Maybe the state update is happening in other 3rd party library and you just have the updated value.

const deferredVal = useDeferredValue(stateValue)

New APIS for library developers

(As application developer, we might not need these)

useSyncExternalStore  - is a new hook that allows external stores to support concurrent reads.
useInsertionEffect - is a new hook that allows CSS-in-JS libraries.
useId - is a new hook that generates unique ids for components. Useful for design systems

Conclusion

These new features makes the websites faster, giving a good user experience and optimises the performance mainly in SSR.
Things to look forward to in the upcoming versions -

Suspense supporting data fetching where manually rendering the fallback component is taken care by React itself.
Server components (alpha stage) to use React components on server side.