Performance: Improve Context system + style rendering for primitive and core components #60
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This update adds a new hook-based connect mechanic to the Context system.
Addresses some of the concerns originally surfaced here:
#57
Reducing Layers
This strategy was originally mentioned during the early phases of planning the style system:
#2 (comment)
However, a we opted for a pure HOC based strategy, with the understanding that a couple of extra layers is worth of automating prop handling.
I think
connect
may be valuable at the user/consumer level. However, we probably want to optimize as much as possible at the library level.This update reduces the amount of layers from a fully connected context aware component (e.g.
Flex
) and the underlyingdiv
element that React outputs. Typically, this usually 2-3 layers:For
key
instead of ...spreadingOther (potential?) performance enhancements were made at the prop consolidation step within the new
useContextSystem
hook. Notably, skipping JS object spreading in favour of a more manualfor
loop.We may see some gains from this, as noted by @diegohaz in this Tweet:
https://twitter.com/diegohaz/status/1247462435516276742
Improving
Flex
With the addition of
HStack
andVStack
, the coreFlex
component has seem a massive uptick in usage. As such, we should optimize these core components as much as we can. In this update, I've opted to use CSS variables for child alignment, rather than using an internalFlex
context.Improving
View
A tiny but interesting + important update.
View
is not longer connected to the Context system. I can't see an scenario whereView
may benefit from a system-wide context update 🤔 . (We may revisit this in the future if that happens).By disconnecting it from the Context system,
View
avoids potential unnecessary re-rendering based on context/hook updates.Renaming
ComponentsProvider
toContextSystemProvider
The Context system is much more refined now. It's being used more throughout the G2 system.
Therefore, I think the name
ContextSystemProvider
feels more intuitive.