React 19 Performance Examples

This interactive demo application showcases various React 19 rendering patterns with the new React Compiler. Explore how automatic memoization and performance optimizations work in different scenarios without manual optimization techniques.

💡 Open your browser's developer console to see rendering logs and performance metrics!

Learn more about React 18 vs React 19 performance in this detailed comparison article.

Compare with the React 18 version of this demo to see the performance improvements.

Re-rendering siblings ->

Find out why components re-render when sharing state of their parent and how to improve this

Caching Callback ->

Explore performance issues of components with callbacks as properties

Caching properties ->

Find out why some of properties cause re-rendering

Components as properties ->

Investigate influence of components composition on rendering