Skip to content

perf(reactive): optimize arrayField performance, achieving precise rendering with array transposition#4327

Open
voderl wants to merge 6 commits intoalibaba:formily_nextfrom
voderl:chore-computed-perf
Open

perf(reactive): optimize arrayField performance, achieving precise rendering with array transposition#4327
voderl wants to merge 6 commits intoalibaba:formily_nextfrom
voderl:chore-computed-perf

Conversation

@voderl
Copy link

@voderl voderl commented Aug 20, 2025

Before submitting a pull request, please make sure the following is done...

  • [✅] Ensure the pull request title and commit message follow the Commit Specific in English.
  • [✅] Fork the repo and create your branch from master or formily_next.
  • [✅] If you've added code that should be tested, add tests!
  • If you've changed APIs, update the documentation.
  • [✅] Ensure the test suite passes (npm test).
  • [✅] Make sure your code lints (npm run lint) - we've done our best to make sure these rules match our internal linting guidelines.

Please do not delete the above content


What have you changed?

ArrayField does not implement precise rendering, any array state transition will cause all children re-rendering.
When the array is large, it is not possible to render accurately by key, resulting in poor performance.
In this MR, I changed the reaction action of computed to ensure that the computed value will not directly trigger the upstream reaction, but only trigger upstream reaction when computed value has changed.

At the same time, the performance of releasing dependencies during reaction execution is also very low. When there are a large number of reactions and computed values, the performance is very poor, and the degradation is very serious as the number increases. The logic of re-collecting dependencies in reaction has been optimized.

All test cases passed.

Therefore, we can achieve a significant performance improvement on arrayField.

Performance compare sandbox:
https://codesandbox.io/p/sandbox/voder-formily-performance-forked-2wlfmc?file=%2Fformily-array-field.tsx%3A26%2C9

@CLAassistant
Copy link

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

@voderl voderl force-pushed the chore-computed-perf branch from 4ac6512 to 55791d1 Compare August 21, 2025 11:36
@voderl voderl force-pushed the chore-computed-perf branch from 55791d1 to 450a6f8 Compare September 9, 2025 06:27
@voderl voderl force-pushed the chore-computed-perf branch from 450a6f8 to ecb5789 Compare September 10, 2025 02:24
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