Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent extra render item calls #253

Merged
merged 6 commits into from
Mar 30, 2022
Merged

Prevent extra render item calls #253

merged 6 commits into from
Mar 30, 2022

Conversation

naqvitalha
Copy link
Collaborator

@naqvitalha naqvitalha commented Mar 28, 2022

Description

If the render item has very complex JSX being returned directly this change can improve performance by multiple folds.

Checklist

@@ -101,4 +101,28 @@ describe("FlashList", () => {
flashList.instance.getUpdatedWindowCorrectionConfig().value.windowShift
).toBe(-100);
});
it("calls render item only when data of the items has changed", (done) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test is awesome 👏


// There's some async operation happening inside the scroll component causing jest to throw errors
// This is a workaround to silence it.
requestAnimationFrame(() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does that happen due to the setProps call? I wonder if this is something users will run in, too - if so, we should either document it or try to solve in the mock we provide.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm looking into it. Here I was thinking I'd just get this done in a few min and this issue popped up. This is happening because this is the last test to run and some import happen after jest has teared down.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@fortmarek I checked this and everything on the surface looks fine. I'm not going to spend more time on this as we need to wrap up build phase. I have created an issue here to track it: #255
I'll come back to it. Till then this test is serving it's purpose well.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, I don't mind it for our internal test suite but we should investigate to ensure users won't unnecessarily run into this (or as mentioned, at least document it once we understand the problem). I put it in the opensource milestone as it's important to look at it before we make it public.

src/FlashList.tsx Outdated Show resolved Hide resolved
src/FlashList.tsx Outdated Show resolved Hide resolved
naqvitalha and others added 2 commits March 29, 2022 08:52
Co-authored-by: Marek Fořt <marek.fort@shopify.com>
@naqvitalha naqvitalha marked this pull request as ready for review March 29, 2022 16:24
@fortmarek fortmarek merged commit abc1681 into main Mar 30, 2022
@fortmarek fortmarek deleted the reduceRenderItemCalls branch March 30, 2022 09:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants