100% React Rendering, Avoiding Wasted Renders

AG Grid and React play well together because the rendering engine for React is 100% React. Niall Crosby, CEO of AG Grid, demonstrates this in the video by looking in the React developer tools and you'll see how to use memoization effectively to avoid wasted renders.

00:00 AG Grid is 100% React
00:10 Starting Code Explained
00:25 Custom React Component
00:54 Developer Tools Rendering View
01:56 Wasted Renders Demonstration
03:00 Avoiding Waster Renders with memo
03:28 Summary

AG Grid works with React, Angular, Vue, and JavaScript. Available as a free community edition and commercially as an Enterprise product (full support and more features).

This is part of a series of video tutorials showing how to get started with AG Grid and React.

All videos are available in a playlist:

Source code for all videos is available on Github:

[dosdeviant]

Concise, informative and entertaining!

[conaxlearn]

I didn't need to wrap MyCom inside memo. Maybe later React or Ag Grid version fixed the issue.

[LukiausdemKaff]

Hello AG-Grid Team,
I am using the valueFormatters. The value Formatter runs on every scroll etc. on the grid. I tried it with memo around the formatter. This leads to the result, that the values are not anymore fromatted.
How is it possible to reduce the amount of value formatter runs if the value does not change? Thanks in advance