top of page
Logo der Online Agentur mdwp

React Fiber

React Fiber is a reimplementation of the core algorithm in React which is in charge of building a web application's user interface. It was developed to aid in the improvement of the responsiveness, fluidity, and feel of complex and large-scale applications.

Fiber primarily deals with the issue of blocking due to time-consuming tasks. It introduces a kind of virtual stack frame, with capabilities to pause, restart, or abort tasks as needed. This is especially beneficial for resource-intensive tasks like animations, layout and rendering.

In the previous Stack reconciliation algorithm used in React, when updates such as changes in state or props occurred, it ended up traversing the entire tree, which made it hard to optimize for large amount of workload or for an animation task.

But with React Fiber, these tasks are broken down into smaller units of work, and are spread out over multiple frames. This concurrency model helps enhance the application's performance by efficiently utilizing the browser's resources.

To clarify, any React version after v16.0, is already using Fiber. There are no specific codes to make use of Fiber, it's a part of React's internals.

However, new features like React Suspense and Concurrent Mode are capabilities provided by Fiber architecture that you can use as a developer.

Here's how to use Suspense:

```
import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
```

In the above code, `OtherComponent` is loaded lazily using React.lazy() and with React.Suspense we provide a fallback UI until `OtherComponent` is done loading.

bottom of page