Skip to content

Conversation

@IronFransis
Copy link

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:

  1. Conflicts with React's rendering cycle - Explains how RAF runs independently of React's lifecycle, causing re-render issues, stale closures, and race conditions
  2. Memory leaks - Documents the importance of properly cleaning up RAF callbacks in useEffect hooks with a code example showing correct cleanup patterns
  3. Performance overhead - Highlights how RAF callbacks execute every frame and can block the main thread, causing frame drops and battery drain
  4. React Native specific issues - Details how RAF behaves differently in React Native (both legacy and new architecture), competing with bridge communication and blocking JavaScript operations
  5. State synchronization problems - Covers issues with updating React state inside RAF callbacks

The documentation also provides clear recommendations to prefer CSS transitions, Web Animations API, or React-integrated animation libraries like framer-motion over direct RAF usage, reserving RAF only for cases where direct DOM manipulation or canvas rendering is truly necessary.

Verification steps:

  • Review the new section in _includes/markdown/JavaScript.md starting at line 450
  • Verify the code example demonstrates proper cleanup pattern with cancelAnimationFrame in useEffect cleanup
  • Confirm the guidance aligns with React and React Native best practices
  • Check that the recommendations point developers toward safer alternatives

Benefits:

  • Prevents common pitfalls when using RAF in React/React Native applications
  • Reduces memory leaks from improper cleanup
  • Improves performance by guiding developers to more appropriate animation solutions
  • Provides clear code examples for proper RAF usage when it is necessary
  • Addresses both React web and React Native specific concerns

Alternative implementations considered:

  • Could have been a separate section, but placing it under the existing RAF section maintains better discoverability
  • Could have included more code examples, but the single example demonstrates the critical cleanup pattern effectively

Closes #

How to test the Change

  1. Navigate to the JavaScript best practices documentation page
  2. Locate the "Debounce, Throttle, and requestAnimationFrame" section
  3. Verify the new "React and React Native Considerations" subsection appears
  4. Review all five numbered points for accuracy and clarity
  5. Check that the code example uses proper React hooks syntax and cleanup pattern
  6. Confirm the recommendations section suggests appropriate alternatives to RAF

Changelog Entry

Changed - Added React and React Native specific guidance for requestAnimationFrame usage, including common pitfalls, memory leak prevention, and performance considerations

Credits

Props @username

Checklist:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant