Profiler

React 16.4 will introduce a new Profiler component (initially exported as React.unstable_Profiler) for collecting render timing information in order to measure the "cost" of rendering for both sync and async modes.

Profiler timing metrics are significantly faster than those built around the User Timing API, and as such we plan to provide a production+profiling bundle in the future. (The initial release will only log timing information in DEV mode, although the component will still render its children- without timings- in production mode.)

How is it used?

Profiler can be declared anywhere within a React tree to measure the cost of rendering that portion of the tree. For example, a Navigation component and its descendants:

WizardSource / react_fiber.md

Created May 7, 2021 17:51 — forked from geoffreydhuyvetters/react_fiber.md

What is React Fiber? And how can I try it out today?

what?

React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of research by the React team.

why?

WizardSource / fiberIntro.md

Created May 7, 2021 17:45 — forked from aditya-rb/fiberIntro.md

Intro to fiber.

Fiber Notes:-

Why fiber (or anything new) ?

React team wanted to detach reconciler from renderer. Plug-n-play.

Present react reconciler works in a different ways.

WizardSource / gist:edf1a504139c7f9fafc778ebc7977da6

Created May 7, 2021 17:45 — forked from xyhp915/gist:4b6767cb6f109875b5afc5e14a20e10a

React Fiber Architecture

Introduction

React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of research by the React team.

The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.

Other key features include the ability to pause, abort, or reuse work as new updates come in; the ability to assign priority to different types of updates; and new concurrency primitives.

WizardSource / array_iteration_thoughts.md

Created March 6, 2021 00:59 — forked from ljharb/array_iteration_thoughts.md

Array iteration methods summarized

While attempting to explain JavaScript's reduce method on arrays, conceptually, I came up with the following - hopefully it's helpful; happy to tweak it if anyone has suggestions.

Intro

JavaScript Arrays have lots of built in methods on their prototype. Some of them mutate - ie, they change the underlying array in-place. Luckily, most of them do not - they instead return an entirely distinct array. Since arrays are conceptually a contiguous list of items, it helps code clarity and maintainability a lot to be able to operate on them in a "functional" way. (I'll also insist on referring to an array as a "list" - although in some languages, List is a native data type, in JS and this post, I'm referring to the concept. Everywhere I use the word "list" you can assume I'm talking about a JS Array) This means, to perform a single operation on the list as a whole ("atomically"), and to return a new list - thus making it much simpler to think about both the old list and the new one, what they contain, and

Cliff WizardSource