Wrapping ag-grid cell renderers with presence observer throws - ReactJS: Maximum update depth exceeded error on quick scroll
![emmax666055698](https://s.gravatar.com/avatar/5bab91c6df1a0a9914782de6f352efc0?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fem.png)
![cord icon logo](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcord-icon.19285d53.png&w=32&q=75)
Hi @emmax666055698, I wasn't able to duplicate this problem on a local test file using ag-grid. Can you give us the whole stack trace or a test file we can run to see the problem in action? Here's the gist where I tried to replicate it: https://gist.github.com/flooey/337229e289db27dd445b6b40e8aa60e5
![emmax666055698](https://s.gravatar.com/avatar/5bab91c6df1a0a9914782de6f352efc0?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fem.png)
Hi @Adam Vartanian did you try this with a lot of rows? it happens when I scroll throw many rows... On the side is there a way to disable the link in the cord notification card? I would like to route manually with the next js router... Then I see that the notification and message content are usually in JSON, if I wanted to build my own custom components is there a component to render just the content?
![cord icon logo](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcord-icon.19285d53.png&w=32&q=75)
@emmax666055698 , I'll let Adam follow up with you on the grid crash.
On Notifications, we do have a Notification component that does just the rendering. You can use that and then handle the click event to do your own routing.
![emmax666055698](https://s.gravatar.com/avatar/5bab91c6df1a0a9914782de6f352efc0?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fem.png)
Hi @Dave yes I am currently using the cord notification component, it renders the content well but it's wrapped in an <a> tag so I can't really handle the onclick function myself because it just reloads/redirects the page when clicked... Is there a prop I am missing or something...
![](https://s3.eu-west-2.amazonaws.com/radical-stack-fileuploads-wumx9efffh4z/61a1f87f-b8e8-4dd7-9f53-8ede24b4223a?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIA4VDA5YLVXGT6MTWX%2F20240727%2Feu-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T080000Z&X-Amz-Expires=14400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEA4aCWV1LXdlc3QtMiJHMEUCIHgAJOtY4w7jrBMqOreJbqPHq9u07ky0S3CCVuHTlo%2BpAiEArLD%2FpxRfHO4b6d3mnif4R5o4s6wBMxdDF0IajQxTfX4qvgUI5%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FARADGgw4Njk5MzQxNTQ0NzUiDFgEAWsAQtKCn2HAECqSBXsqZg7mAwuECogcLUpZ4Nb67Ko3QMzDRTl6XLXqk1CL7JDHKvh4U336oTP%2BEAGfRTgGSC4JQmleVMGQcEQdKTdbjW0nyXh%2Bx8mYOI15KFg0l7wy0gKVMzGxK86JmNidwfEgvI48whiGNWx2slHOPoGVdUaVWlJ8cPvLXNhs8ev%2FZneWWzRYilSoLG5Dovy%2FXHLis19P0SYj00pZNvN%2BHbj4yVMFWdIRf8hC6qVrvm1h%2BZCza8fRoZ1P5uobl%2BJlGUT%2Bi5lcpwdguCJo31Ou49tHRVyAh0uKs6elbgZZepEf6blUcWIHruo%2BpttxgHHzbJrArMhkjJIWNgaftQeW8aGlWtecg1U6STIA7G78bPTbZxLPb5jhah21NZDh3FAiyr47HQgRZpko%2BphFhg8ZMKp4fY1XMeRM51fjOt7ChcsW7aGc%2F5E2RLhHgw2VsnjVfUJrm%2FFE2kvVeclqrZa3qWY4IF1OjelFQEsEbV6dTQIU94iyrx3m%2FLSRleEY3tMbJjpQBJbPel%2BeqSWSlK4ydxif53DFLU6ICsJQzi%2BJsOnpNUKnbNbDrc2X79EyiC35r8fGRVMOYv0es7NC%2F6soBfi0RhdY5B4CYFSCnDNGD91tiwie0CGgVWOE5XPBpRsVmSkPpS2F0h5xNzZvOBQTLtyK1Q5yeS8c%2Fc1TElyZrKeM%2FVgUh%2FeWLSzFjLtVfzzkc7JiMyP2fh2G9EiBIItJzOkdA5Szcxy1LmMKY6ymYyKe48pr%2BOAKaD1ahuYCaotOH2hEvRmz1CN9WsXzd7ROJ8k%2BWlg4xn9YIypBWgCYn%2BU90QTkUL0ft01iB6dlvwZ1JSmKhJiaAQrKBKu28SlFDZ6gDadFHcKaoqrOtdeqVwFbrwUw3Z2StQY6sQE%2FwKzFSP77X6VorxweYMwynWByQY0wdVgtcXQ84D25Zr%2BfxwOcnm0huZrKIVkopCKyr6YvUhcvuVc2PVnA5es9MNVKPoQ9sWd%2FXkMEfJxbDIiVr9sjAekusa0AKmhCvD6AbRmebuLRxWCDyqObv%2FDZ72xtbgzDs0hhJRZwFIR%2FWNM%2BOqWRAvDgHBqjvHAzke8dP6tO%2BOx0DEoKit4pgse1vrGIK9L4FacFz9z7YyxAHTU%3D&X-Amz-SignedHeaders=host&response-content-disposition=attachment%3B%20filename%3D%22Screenshot%25202024-05-16%2520at%252011.08.30.png%22&X-Amz-Signature=95b195ebb820f14c2f02cf891dbda5344ecaa509f83b3cb9771e59459b411ce4)
![](https://s3.eu-west-2.amazonaws.com/radical-stack-fileuploads-wumx9efffh4z/b43aa087-e72e-4897-b976-ce96087ee7fc?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIA4VDA5YLVXGT6MTWX%2F20240727%2Feu-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T080000Z&X-Amz-Expires=14400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEA4aCWV1LXdlc3QtMiJHMEUCIHgAJOtY4w7jrBMqOreJbqPHq9u07ky0S3CCVuHTlo%2BpAiEArLD%2FpxRfHO4b6d3mnif4R5o4s6wBMxdDF0IajQxTfX4qvgUI5%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FARADGgw4Njk5MzQxNTQ0NzUiDFgEAWsAQtKCn2HAECqSBXsqZg7mAwuECogcLUpZ4Nb67Ko3QMzDRTl6XLXqk1CL7JDHKvh4U336oTP%2BEAGfRTgGSC4JQmleVMGQcEQdKTdbjW0nyXh%2Bx8mYOI15KFg0l7wy0gKVMzGxK86JmNidwfEgvI48whiGNWx2slHOPoGVdUaVWlJ8cPvLXNhs8ev%2FZneWWzRYilSoLG5Dovy%2FXHLis19P0SYj00pZNvN%2BHbj4yVMFWdIRf8hC6qVrvm1h%2BZCza8fRoZ1P5uobl%2BJlGUT%2Bi5lcpwdguCJo31Ou49tHRVyAh0uKs6elbgZZepEf6blUcWIHruo%2BpttxgHHzbJrArMhkjJIWNgaftQeW8aGlWtecg1U6STIA7G78bPTbZxLPb5jhah21NZDh3FAiyr47HQgRZpko%2BphFhg8ZMKp4fY1XMeRM51fjOt7ChcsW7aGc%2F5E2RLhHgw2VsnjVfUJrm%2FFE2kvVeclqrZa3qWY4IF1OjelFQEsEbV6dTQIU94iyrx3m%2FLSRleEY3tMbJjpQBJbPel%2BeqSWSlK4ydxif53DFLU6ICsJQzi%2BJsOnpNUKnbNbDrc2X79EyiC35r8fGRVMOYv0es7NC%2F6soBfi0RhdY5B4CYFSCnDNGD91tiwie0CGgVWOE5XPBpRsVmSkPpS2F0h5xNzZvOBQTLtyK1Q5yeS8c%2Fc1TElyZrKeM%2FVgUh%2FeWLSzFjLtVfzzkc7JiMyP2fh2G9EiBIItJzOkdA5Szcxy1LmMKY6ymYyKe48pr%2BOAKaD1ahuYCaotOH2hEvRmz1CN9WsXzd7ROJ8k%2BWlg4xn9YIypBWgCYn%2BU90QTkUL0ft01iB6dlvwZ1JSmKhJiaAQrKBKu28SlFDZ6gDadFHcKaoqrOtdeqVwFbrwUw3Z2StQY6sQE%2FwKzFSP77X6VorxweYMwynWByQY0wdVgtcXQ84D25Zr%2BfxwOcnm0huZrKIVkopCKyr6YvUhcvuVc2PVnA5es9MNVKPoQ9sWd%2FXkMEfJxbDIiVr9sjAekusa0AKmhCvD6AbRmebuLRxWCDyqObv%2FDZ72xtbgzDs0hhJRZwFIR%2FWNM%2BOqWRAvDgHBqjvHAzke8dP6tO%2BOx0DEoKit4pgse1vrGIK9L4FacFz9z7YyxAHTU%3D&X-Amz-SignedHeaders=host&response-content-disposition=attachment%3B%20filename%3D%22Screenshot%25202024-05-16%2520at%252011.08.49.png%22&X-Amz-Signature=45f004a44177c31b79b77cd999db9a6d525f5dd75e8011ffb1309753b7ae5c2d)
![cord icon logo](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcord-icon.19285d53.png&w=32&q=75)
I believe that if you pass a click handler to that, and then return false , the default browser behavior for clicking the anchor tag will not happen.
![cord icon logo](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcord-icon.19285d53.png&w=32&q=75)
Testing that locally shows that that is not the case as I thought. Digging in further to see why that might be.
![cord icon logo](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcord-icon.19285d53.png&w=32&q=75)
@emmax666055698 , ok, It looks like the way to stop it from following the anchor href is to add an onClick handler, and then in that method, call e.preventDefault() on the event e that we pass to you. That will stop it from navigating to the url.
![cord icon logo](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcord-icon.19285d53.png&w=32&q=75)
Incidentally, this is in our docs as an example on how to run async code in the callback, but it also shows how to prevent the default navigation from happening : https://docs.cord.com/components/cord-notification#Example-onClick--async-callback
![emmax666055698](https://s.gravatar.com/avatar/5bab91c6df1a0a9914782de6f352efc0?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fem.png)
Works perfectly @Dave ... Thank you... I will wait for @Adam Vartanian to revert on the grid issue.
![emmax666055698](https://s.gravatar.com/avatar/5bab91c6df1a0a9914782de6f352efc0?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fem.png)
Was also able to narrow down on the issue, so it happens at the presence face pile
![](https://s3.eu-west-2.amazonaws.com/radical-stack-fileuploads-wumx9efffh4z/85b653e5-890c-437f-94b3-2bfecc358927?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIA4VDA5YLVXGT6MTWX%2F20240727%2Feu-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T080000Z&X-Amz-Expires=14400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEA4aCWV1LXdlc3QtMiJHMEUCIHgAJOtY4w7jrBMqOreJbqPHq9u07ky0S3CCVuHTlo%2BpAiEArLD%2FpxRfHO4b6d3mnif4R5o4s6wBMxdDF0IajQxTfX4qvgUI5%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FARADGgw4Njk5MzQxNTQ0NzUiDFgEAWsAQtKCn2HAECqSBXsqZg7mAwuECogcLUpZ4Nb67Ko3QMzDRTl6XLXqk1CL7JDHKvh4U336oTP%2BEAGfRTgGSC4JQmleVMGQcEQdKTdbjW0nyXh%2Bx8mYOI15KFg0l7wy0gKVMzGxK86JmNidwfEgvI48whiGNWx2slHOPoGVdUaVWlJ8cPvLXNhs8ev%2FZneWWzRYilSoLG5Dovy%2FXHLis19P0SYj00pZNvN%2BHbj4yVMFWdIRf8hC6qVrvm1h%2BZCza8fRoZ1P5uobl%2BJlGUT%2Bi5lcpwdguCJo31Ou49tHRVyAh0uKs6elbgZZepEf6blUcWIHruo%2BpttxgHHzbJrArMhkjJIWNgaftQeW8aGlWtecg1U6STIA7G78bPTbZxLPb5jhah21NZDh3FAiyr47HQgRZpko%2BphFhg8ZMKp4fY1XMeRM51fjOt7ChcsW7aGc%2F5E2RLhHgw2VsnjVfUJrm%2FFE2kvVeclqrZa3qWY4IF1OjelFQEsEbV6dTQIU94iyrx3m%2FLSRleEY3tMbJjpQBJbPel%2BeqSWSlK4ydxif53DFLU6ICsJQzi%2BJsOnpNUKnbNbDrc2X79EyiC35r8fGRVMOYv0es7NC%2F6soBfi0RhdY5B4CYFSCnDNGD91tiwie0CGgVWOE5XPBpRsVmSkPpS2F0h5xNzZvOBQTLtyK1Q5yeS8c%2Fc1TElyZrKeM%2FVgUh%2FeWLSzFjLtVfzzkc7JiMyP2fh2G9EiBIItJzOkdA5Szcxy1LmMKY6ymYyKe48pr%2BOAKaD1ahuYCaotOH2hEvRmz1CN9WsXzd7ROJ8k%2BWlg4xn9YIypBWgCYn%2BU90QTkUL0ft01iB6dlvwZ1JSmKhJiaAQrKBKu28SlFDZ6gDadFHcKaoqrOtdeqVwFbrwUw3Z2StQY6sQE%2FwKzFSP77X6VorxweYMwynWByQY0wdVgtcXQ84D25Zr%2BfxwOcnm0huZrKIVkopCKyr6YvUhcvuVc2PVnA5es9MNVKPoQ9sWd%2FXkMEfJxbDIiVr9sjAekusa0AKmhCvD6AbRmebuLRxWCDyqObv%2FDZ72xtbgzDs0hhJRZwFIR%2FWNM%2BOqWRAvDgHBqjvHAzke8dP6tO%2BOx0DEoKit4pgse1vrGIK9L4FacFz9z7YyxAHTU%3D&X-Amz-SignedHeaders=host&response-content-disposition=attachment%3B%20filename%3D%22Screenshot%25202024-05-16%2520at%252017.54.33.png%22&X-Amz-Signature=dcd385b2828960f45c75d47c754df6608123c54f39101b2e169eb442c30a5ca5)
![](https://s3.eu-west-2.amazonaws.com/radical-stack-fileuploads-wumx9efffh4z/53e14a9f-8239-45a8-802b-29cbeaad9b80?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIA4VDA5YLVXGT6MTWX%2F20240727%2Feu-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T080000Z&X-Amz-Expires=14400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEA4aCWV1LXdlc3QtMiJHMEUCIHgAJOtY4w7jrBMqOreJbqPHq9u07ky0S3CCVuHTlo%2BpAiEArLD%2FpxRfHO4b6d3mnif4R5o4s6wBMxdDF0IajQxTfX4qvgUI5%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FARADGgw4Njk5MzQxNTQ0NzUiDFgEAWsAQtKCn2HAECqSBXsqZg7mAwuECogcLUpZ4Nb67Ko3QMzDRTl6XLXqk1CL7JDHKvh4U336oTP%2BEAGfRTgGSC4JQmleVMGQcEQdKTdbjW0nyXh%2Bx8mYOI15KFg0l7wy0gKVMzGxK86JmNidwfEgvI48whiGNWx2slHOPoGVdUaVWlJ8cPvLXNhs8ev%2FZneWWzRYilSoLG5Dovy%2FXHLis19P0SYj00pZNvN%2BHbj4yVMFWdIRf8hC6qVrvm1h%2BZCza8fRoZ1P5uobl%2BJlGUT%2Bi5lcpwdguCJo31Ou49tHRVyAh0uKs6elbgZZepEf6blUcWIHruo%2BpttxgHHzbJrArMhkjJIWNgaftQeW8aGlWtecg1U6STIA7G78bPTbZxLPb5jhah21NZDh3FAiyr47HQgRZpko%2BphFhg8ZMKp4fY1XMeRM51fjOt7ChcsW7aGc%2F5E2RLhHgw2VsnjVfUJrm%2FFE2kvVeclqrZa3qWY4IF1OjelFQEsEbV6dTQIU94iyrx3m%2FLSRleEY3tMbJjpQBJbPel%2BeqSWSlK4ydxif53DFLU6ICsJQzi%2BJsOnpNUKnbNbDrc2X79EyiC35r8fGRVMOYv0es7NC%2F6soBfi0RhdY5B4CYFSCnDNGD91tiwie0CGgVWOE5XPBpRsVmSkPpS2F0h5xNzZvOBQTLtyK1Q5yeS8c%2Fc1TElyZrKeM%2FVgUh%2FeWLSzFjLtVfzzkc7JiMyP2fh2G9EiBIItJzOkdA5Szcxy1LmMKY6ymYyKe48pr%2BOAKaD1ahuYCaotOH2hEvRmz1CN9WsXzd7ROJ8k%2BWlg4xn9YIypBWgCYn%2BU90QTkUL0ft01iB6dlvwZ1JSmKhJiaAQrKBKu28SlFDZ6gDadFHcKaoqrOtdeqVwFbrwUw3Z2StQY6sQE%2FwKzFSP77X6VorxweYMwynWByQY0wdVgtcXQ84D25Zr%2BfxwOcnm0huZrKIVkopCKyr6YvUhcvuVc2PVnA5es9MNVKPoQ9sWd%2FXkMEfJxbDIiVr9sjAekusa0AKmhCvD6AbRmebuLRxWCDyqObv%2FDZ72xtbgzDs0hhJRZwFIR%2FWNM%2BOqWRAvDgHBqjvHAzke8dP6tO%2BOx0DEoKit4pgse1vrGIK9L4FacFz9z7YyxAHTU%3D&X-Amz-SignedHeaders=host&response-content-disposition=attachment%3B%20filename%3D%22Screenshot%25202024-05-16%2520at%252017.51.58.png%22&X-Amz-Signature=a3a1a8e3b8df033aab9d143d02ed4d62add07a2ca62a9bd9a8cdf09e4828fa7e)
![emmax666055698](https://s.gravatar.com/avatar/5bab91c6df1a0a9914782de6f352efc0?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fem.png)
I could have tried other ways to approach the cell presence but the presence.usePresence hook only returns the user id, would be nice if it returned the whole user info so I don't have to make an extra api call to my backend to get the user profile
![cord icon logo](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcord-icon.19285d53.png&w=32&q=75)
Hrm, I increased the rows in my sample above to 3000 and scrolled as fast as I could, but I wasn't able to get it to throw an error. Can you include the error that appears above the stack trace you shared, maybe?
As far as using the presence API directly, you can use the Cord user API to get the user data for those users. (That's what PresenceFacepile does internally.) See https://docs.cord.com/js-apis-and-hooks/user-api/observeUserData for the details.
![emmax666055698](https://s.gravatar.com/avatar/5bab91c6df1a0a9914782de6f352efc0?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fem.png)
Thanks, Adam for taking the time to attempt to replicate... As you can probably tell from my gist it's a heavy grid, infinite scroll fetching from the backend, and custom cell renderers, so perhaps it's something unique to my ag grid codebase... I will try a different form of collaborative indication using the user API and do a coloured border around the cell instead of the face pile, hopefully, that does not have the same issue, I will revert once I am done but it's the only thing left for us and why we have not upgraded our account.
![cord icon logo](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcord-icon.19285d53.png&w=32&q=75)
Definitely happy to continue working with you on this, our code shouldn't crash even in a heavy grid :) Any chance we could get a login to your service or something to try to debug? Or could jump on a call? (Feel free to email me at flooey@cord.com with nonpublic details.)
![emmax666055698](https://s.gravatar.com/avatar/5bab91c6df1a0a9914782de6f352efc0?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fem.png)
Okay wow, I'd appreciate this... so this particular feature is still in dev because it's currently being worked on, we can have a call first to pair on it... Just let me know when... I could also show you how we are currently using other cord features.
![cord icon logo](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcord-icon.19285d53.png&w=32&q=75)
Sure thing, why don't we swap to email and then we can set up a call? I'm in London so anytime during the workday UK time works for me