React 18 Performance Examples

This interactive demo application showcases various React 18 rendering patterns and performance optimization techniques. Explore how component re-rendering works in different scenarios and learn best practices for building performant React applications.

💡 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 19 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