Potential "asChild" pattern performance issue

[isBatak]

Description

Both Ark UI and Radix UI's "asChild" pattern suffer from a small performance issue compared to the polymorphic "as" prop. This is due to the usage of cloneElement, which causes this pattern to opt out of Reacts’s automatic re-render optimisation.

Here is the slot example:
https://github.com/chakra-ui/ark/assets/4128883/d7b33368-28de-4d57-973f-980a807cab53

The solution is to memoize the asChild component returned form the factory.

Link to Reproduction

https://codesandbox.io/p/sandbox/aschild-perf-issue-8hgfsm?file=%2Fsrc%2Fcomponents%2FExample.tsx%3A63%2C2

Steps to reproduce

1. Open this code sandbox https://codesandbox.io/p/sandbox/aschild-perf-issue-8hgfsm?file=%2Fsrc%2Fcomponents%2FExample.tsx%3A63%2C2
2. Click on UPTADE button
3. Notice that RERENDER indicator only appears on the first element and not on the other two elements

Ark UI Version

0.15.0

Framework

• React
• Solid
• Vue

Browser

Google Chrome Version 117.0.5938.149

Additional Information

No response

[cschroeter]

@isBatak

Thanks. Will be resolved in 2.2.0