Replies: 13 comments 22 replies
-
When I first read the above it was not clear why there is this alternation of threads happening with the commit and mounting phase. It only made sense after reading The Threading Model Post. Maybe it would be worth linking it there and introducing how priority updates impact the render pipeline? |
Beta Was this translation helpful? Give feedback.
-
|
Also in the commit phase, it is says that |
Beta Was this translation helpful? Give feedback.
-
|
Small nit, but a quality of life improvement, it would be for The Render Pipeline post to have linkable headders to each phase:
I only understood that section under the image was related to one of the rendering phases after the second one I think. |
Beta Was this translation helpful? Give feedback.
-
|
Addressed here: |
Beta Was this translation helpful? Give feedback.
-
|
@cortinico i think this could be applied for React State Updates too |
Beta Was this translation helpful? Give feedback.
-
Yup, agreed. PR addressing this is here: |
Beta Was this translation helpful? Give feedback.
-
|
About the View Flattening post. From following along I interpreted that View Flattening is skipped in some cases, could we expand on that or document it in the post? specially since an app that unknownly causes View flattenning to not occur could have worse peformance. |
Beta Was this translation helpful? Give feedback.
-
|
Hello @AndreiCalazans it is always hard to know how much complexity to expose to engineers and what to hide. I didn't want to get into all of the implementation details in the deep dive as there are quite a few things that affect whether a node is flattened or not. Also, this optimisation should come for "free" and people shouldn't have to think about it. Do you think we should document every aspect that affects view flattening? Or do you think a link to code would be enough? |
Beta Was this translation helpful? Give feedback.
-
That's a fair point. I think just the link to the code might be enough since this is a deep dive and not targetted at the novice developer. |
Beta Was this translation helpful? Give feedback.
-
|
Something really love to see is a |
Beta Was this translation helpful? Give feedback.
-
Interesting idea @jacobp100. I'll share with you my thoughts on the subject so we can discuss it further. Increased complexity is my concern with Negligible performance gains from using few Alternative approaches we could explore before considering What do you think @jacobp100 ? |
Beta Was this translation helpful? Give feedback.
-
|
In the discrete event interruption. When it states that "React and the renderer are able to interrupt the render phase and merge its state with a high priority event that was executed on the UI thread." Does it mean the rendering that was happening in the JS thread will continue in the UI thread alongside the high priority event? |
Beta Was this translation helpful? Give feedback.
-
|
Once discrete event has been handled, React will continue the render phase in JS thread. Only updates relevant to the discrete event will be applied synchronously on the main thread. This is to minimise time it blocks the main thread . I'll change the diagram so it clearer, thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Addressed: facebook/react-native-website#2999 |
Beta Was this translation helpful? Give feedback.
-
|
@sammy-SC Just by looking at the image, it looks like the React tree is being modified on the UI thread. Even if it is a "Discrete event", is it correct that a React trigger is created in the JS thread and reflected synchronously |
Beta Was this translation helpful? Give feedback.
-
|
Nit: In the architecture overview it would be nice to point out how knowing the architecture is not a pre-requisite to being a good React Native developer. Knowing how the technical recruiting world works and how well detailed the deep-dive is it will not be a surprise if technical interviews start to ask questions related to the inner workings of React Native. We shoud try to discourage that behavior. |
Beta Was this translation helpful? Give feedback.
-
|
That's a great point! I'll try to include it in the introduction. Thank you. |
Beta Was this translation helpful? Give feedback.
-
|
Hello @AndreiCalazans, I forgot to follow up on this. I've updated the introduction section in architecture overview to clarify who is the target audience and that it is not a pre-requisite to be a good React Native developer. It now also redirects people to Guides section in case newcomers stumble there. Thank you for your feedback. |
Beta Was this translation helpful? Give feedback.
-
nit: the link is not correct in |
Beta Was this translation helpful? Give feedback.
-
|
Just checked and the link looks fine to me (it points to where you mentioned). |
Beta Was this translation helpful? Give feedback.
-
i think we should add a page/documentation for the |
Beta Was this translation helpful? Give feedback.
-
|
Hello @gorhom, do you suggest adding a deep dive on code generation? Or adding documentation how to use code generation in your app. If it is the former, is there anything specific you would be interested in? If it is the latter, then I believe there is a plan to add documentation for code generation to the new architecture migration guide playbook. @cortinico will know more about this. |
Beta Was this translation helpful? Give feedback.
-
Yes. Currently there are details about the Codegen in the New Architecture Guide: As a side note, we're currently expanding this guide and restructuring it a bit (@cipolleschi is driving this effort). We specifically planned for a page only about Codegen to document the rationale behind this component and give specific insights about it. Ideally this would clarify a bit more your doubts @gorhom |
Beta Was this translation helpful? Give feedback.
-
|
hi @sammy-SC , @cortinico 👋 I meant the former, "adding documentation how to use code generation in your app or with library".
this is exactly what i was referencing and looking for 👏
this would be perfect! thanks for the effort spent on these documents <3 |
Beta Was this translation helpful? Give feedback.
-
nit: the link is pointing to |
Beta Was this translation helpful? Give feedback.
-
|
Fixed here facebook/react-native-website#2992 |
Beta Was this translation helpful? Give feedback.
-
|
in Render Pipeline > React State Update
I think it would be clear/helpful to reference the previous example cloned node : |
Beta Was this translation helpful? Give feedback.
-
|
@cortinico I was confused about the rendering performance of fabric. I wrote a demo to test the rendering performance of fabric. I rendered 1000 TestComponent components in scrollview. The previous JS Bridge architecture took more than 700 milliseconds ,how ever Fabric takes more than 1400 milliseconds, rendering performance of fabric is worse than before? I am very confused,repo url:https://github.com/bozaigao/FabricDemo |
Beta Was this translation helpful? Give feedback.
-
|
I am not able to check the code |
Beta Was this translation helpful? Give feedback.
-
|
Hello @bozaigao, I would be curious to take a look at this, could you please fix the repo? What platform was this on? |
Beta Was this translation helpful? Give feedback.
-
|
I'm using this repo (
https://github.com/talknagish/react-native-turbo-starter) to test out
Fabric but am experiencing issues suggesting some native components are
32bit and need to be 64bit so won't build because the JVM is running out of
memory.
Before I go crazy trying to fix this, I tried:
//gradle.properties
org.gradle.daemon=true
org.gradle.jvmargs=-Xmx4096m
and
//app/build.gradle
defaultConfig {
ndk.abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86', 'x86_64'
...
}
any other suggestions?
thanks
…On Sun, Jun 5, 2022 at 11:55 AM 波仔糕 ***@***.***> wrote:
@cortinico <https://github.com/cortinico> I was confused about the
rendering performance of fabric. I wrote a demo to test the rendering
performance of fabric. I rendered 1000 TestComponent components in
scrollview. The previous JS Bridge architecture took more than 700
milliseconds ,how ever Fabric takes more than 1400 milliseconds, rendering
performance of fabric is worse than before? I am very confused,repo url:
https://github.com/bozaigao/FabricDemo
—
Reply to this email directly, view it on GitHub
<#1 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ACQHNB4P7DUNLY3MN2XUZXLVNTEV5ANCNFSM5O624YWQ>
.
You are receiving this because you are subscribed to this thread.Message
ID:
<reactwg/react-native-new-architecture/repo-discussions/1/comments/2886617
@github.com>
|
Beta Was this translation helpful? Give feedback.
-
|
Curious what are you building that needs 64bit number?? |
Beta Was this translation helpful? Give feedback.
-
|
Nothing, actually. I haven't made any modifications to the code in this respect. The repo I cloned must be set (somewhere) to use 64bit. I'd be fine with changing to 32bit to get it to work. Thanks |
Beta Was this translation helpful? Give feedback.
-
|
I haven't made any modifications to the existing repo. I cloned it, ran
yarn install, on my windows machine, then ran yarn android just as it said.
The first error said it couldn't find a specific cmake version in the SDK
path. So I added cmake.dir to local.properties and pointed it to the
missing version as suggested.
I tried running yarn android again and this time it stalled at
app:something. Eventually, the jvm ran out of memory. That's when I saw the
message (paraphrasing) 'native modules need to run 64bit'.
I googled around, hoping their might be a quick fix but so far no luck.
Thanks.
…On Sun, Jun 5, 2022, 2:50 PM Subramanya Chakravarthy < ***@***.***> wrote:
Curious what are you building that needs 64bit number??
—
Reply to this email directly, view it on GitHub
<#1 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ACQHNB5UJ7O6MU2DKFVOQFLVNTZGPANCNFSM5O624YWQ>
.
You are receiving this because you commented.Message ID:
<reactwg/react-native-new-architecture/repo-discussions/1/comments/2887055
@github.com>
|
Beta Was this translation helpful? Give feedback.
-
|
It was mentioned that the render phase is the phase that creates the React tree and shadow tree. However, in "Discrete event interruption", section it was mentioned that the render stage may run on the UI thread. In what cases can the React tree be reconciled on the UI thread? Or does the render step in the UI thread only mean changing the shadow tree? |
Beta Was this translation helpful? Give feedback.
-
Hi all,
I'm opening this discussion to discuss about one of the component of the New React Native Architecture: the Fabric Renderer.
Feel free to ask your questions/ideas/doubts related to this Fabric in this discussion.
Relevant resources
Beta Was this translation helpful? Give feedback.
All reactions