Skip to content

Commit

Permalink
Remove ref reads during render in CSS transition polyfill
Browse files Browse the repository at this point in the history
Fix #207

This diff updates the `useStyleTransition` hook to utilize the hook equivalent of the"getDerivedStateFromProps" pattern — which ultimately means to "set state" in render instead of writting/reading refs during render.

The only annoying part of this change is needing to do a deep comparison of the style objects since their identies are almost guaranteed to change every render. I've mitigated the performance implications of this by only comparing the style properties which are designated by `transitionProperties`. This does create some limitations in terms of how close we can get to exactly the browser's behaviro wrt CSS transitions but in my testing that limitation was already present before my changes so at least it isn't a regression.

This strategy also inherently provided some improvements like avoiding unecessary `interpolate` calls and unnecessary animations being triggered.
  • Loading branch information
vincentriemer authored and necolas committed Oct 10, 2024
1 parent a0855a2 commit 97c807a
Show file tree
Hide file tree
Showing 4 changed files with 601 additions and 408 deletions.
Loading

0 comments on commit 97c807a

Please sign in to comment.