chore: Add considerations for using requestAnimationFrame in React and React Native #410
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.
Description of the Change
This PR adds comprehensive guidance on using
requestAnimationFrame(RAF) in React and React Native applications. The existing documentation covered RAF in general browser contexts, but lacked specific considerations for React-based applications where RAF can cause significant issues.The new section covers five critical areas:
useEffecthooks with a code example showing correct cleanup patternsThe documentation also provides clear recommendations to prefer CSS transitions, Web Animations API, or React-integrated animation libraries like
framer-motionover direct RAF usage, reserving RAF only for cases where direct DOM manipulation or canvas rendering is truly necessary.Verification steps:
_includes/markdown/JavaScript.mdstarting at line 450cancelAnimationFrameinuseEffectcleanupBenefits:
Alternative implementations considered:
Closes #
How to test the Change
Changelog Entry
Credits
Props @username
Checklist: