React Version 18: A Detailed Overview

Introduction

• React 18 took 2,161 days to ship.
• Considered underrated and undervalued despite being critical to React's future.

Background

• Year 2016: Aim to make React and web performance better.
• Issue identified with JavaScript's handling on a single main thread.
  • Problem: Synchronous React blocked user events.

Development of React Fiber

• Solution: Not offloading work with web workers, but enhancing work flexibility.
• Concept: Differentiate and prioritize tasks (high vs low priority).
• Introduced React Fiber, reimplementation of core algorithm with built-in scheduling.

Challenges and Developments

• Async Rendering: React needed a public API for scheduling features.
• Introduction of Hooks (2018): Allowed use of functions over classes, improving code reuse and compatibility with async rendering.

Concurrent React

• Name Change: From async rendering to concurrent react.
• Capabilities:
  • Work on multiple tasks with cooperative multitasking.
  • Partially render without DOM commitment.
  • Does not block main thread.

Incremental Adoption

• React 17 (2020): Allowed multiple version usage to facilitate adoption.
• Blocking Mode: Attempted hybrid approach, but was unsuccessful.

Final Strategy with React 18

• Gradual Adoption: No concurrent mode, focus on incremental adoption.
• Concurrent Features:
  • useDeferredValue: Defers UI updates until high-priority tasks finish.
  • startTransition: Marks updates as high-priority, allowing interruption for more urgent tasks.

Practical Applications

• Use Case: Managing updates in complex UI scenarios like tab navigation.
• Improvement: Allows React to prioritize user interactions over other tasks.

Conclusion

• React 18 Impact: Introduced foundational changes focusing on prioritization and rendering flexibility.
• Future Insights: Significance became clearer with the release of React 19.

Next Steps

• Await further developments and lessons from React 19, scheduled for December 2024 release.