Open LPGhatguy opened 6 years ago
We can also document some performance tips that Roact can't do on its own. One thing that I think has an effect but I've not had time to sit down and build a benchmark for is using named keys instead of the default numeric keys:
-- Write this:
{
Child1 = someElement,
Child2 = anotherElement
}
-- Not this:
{
someElement,
anotherElement
}
React recommends a similar practice when rendering lists: Lists and Keys
In Roact, the reconciler diffs children using their keys:
If the key is determined by index, something as simple as inserting an element at the start of the list will change the index of every child, causing at least every child to be updated needlessly, or at worst causing every child to be torn down and re-rendered from scratch.
I don't know how much this actually matters in real-world applications, and I doubt it's noticeable outside of very, very large lists, but it's still a good practice.
I'm building a benchmarking tool now due to increased internal pressure to get a better bearing on Roact's performance problems. A bunch of people are blocked on stuff being slow v.v
It's in another branch, I'll have a PR up either today or tomorrow.
Roact's primary goal is not performance; it's always going to end up slower than writing UI in Roblox by hand and that's okay. @AmaranthineCodices broke down rough performance in a blog post here and showed that Roact is within an order of magnitude of manual UI in at least one simple case.
That being said, there are some improvements that can be made!
Some ideas that can be fleshed out: