Is there a React hook for associations to the current CRM record?

[dgomez-dev]

I am looking for "hearing" in the Deal UI when the user adds a new record, like a Note or call or meeting. 

It would be similar to onCrmPropertiesUpdate, but for associations within the UI.

Of course that I can set a webhook that hear for that on the backend, but I am thinking that it would be useful to have it on the UI, so it get updated.

My use case is to update a Card (for a third-party app) when the user adds a record (like a Note)

Thanks,

Cheers

[MuhammadAmjad · Accepted solution]

In my experience building custom CRM cards and UI extensions for HubSpot, there isn't currently a native React hook specifically for listening to association changes in real-time within the UI. This is a gap that many developers have encountered.

However, here are several approaches you can use to achieve similar functionality:

Polling with Associations API

You can set up interval-based polling in your React component using the HubSpot Associations API. Use useEffect with setInterval to periodically check for new associations. While not as elegant as a hook, it works reliably for most use cases. Set the polling interval based on your performance needs, typically 5-10 seconds works well without causing performance issues.

Combine with Browser Events

Listen for DOM mutation events or use a MutationObserver to detect when the associations section of the Deal UI updates. When you detect changes in the DOM, trigger a fetch to the Associations API to get the updated data. This approach is more responsive than pure polling but requires careful implementation to avoid memory leaks.

Webhook + Server-Sent Events

Since you mentioned already having webhook capability on the backend, you could enhance this by implementing Server-Sent Events or WebSockets. Your backend receives the webhook from HubSpot when an association is created, then pushes that update to your frontend in real-time. This gives you the immediate UI update you're looking for.

Custom Event Dispatcher

Create a custom event dispatcher that your card listens to. When users create Notes or other activities, those actions often trigger other UI updates. You can intercept these using event delegation and manually trigger your card refresh.

Use the CRM Record Update Hook

While not specifically for associations, you can use the onCrmRecordUpdate hook and check if the lastModifiedDate has changed. When it does, fetch the associations to see if they've been updated. This isn't perfect but can catch many association changes.

Implementation Example:

For the polling approach, you'd structure it something like:

useEffect(() => {
const checkAssociations = async () => {
// Fetch associations using HubSpot API
const associations = await fetchAssociations(dealId);
setCardData(associations);
};

const interval = setInterval(checkAssociations, 8000);
return () => clearInterval(interval);
}, [dealId]);

Have you considered submitting this as a feature request to HubSpot? An onAssociationChange hook would be valuable for the developer community. In the meantime, the polling + webhook hybrid approach tends to give the best balance of responsiveness and reliability.

[dgomez-dev]

Thank you for the detailed response and suggestions, super response!!

Yes, I have considered that options, and indeed there is a solution (there is always a solution). However, it would be much more efficient if a there will be better communication or propagation of changes in the UI, with that hooks. 

Hopefully it get improved over time.

David

[BérangèreL]

Hi @dgomez-dev, I hope that you are well!

For updating your card when a user adds a Note, Call, or Meeting to a Deal, to add to what @MuhammadAmjad shared, you have a few helpful options to consider:
 

- You can set up generic webhook subscriptions with object.associationChange events to listen for association updates on the backend and push updates to your app.

- While there isn’t a direct UI hook for new associations, you can use the onCrmPropertiesUpdate action to track property changes on the current record.

- Including a refresh button in your card that calls useAssociations to re-fetch data can also be effective.

Here are some resources for you:

- UI extensions SDK reference
- Create generic webhook subscriptions (BETA)
- CRM data components

Currently, the UI extensions SDK doesn't offer a real-time hook for association changes, I'd recommend to share this via the HubSpot Developer Feedback Form here. Or I can submit it on your behalf if that helps, just let me know. Your feedback is always appreciated.
 

Thanks again for being an engaged member of the Community.

Have a lovely day!
Bérangère

This post was created with the assistance of AI tools

[dgomez-dev]

Thanks BérangèreL, very useful,

My comments

- You can set up generic webhook subscriptions with object.associationChange events to listen for association updates on the backend and push updates to your app.

---> Yes, that is the current solution that I have. However, although this update the Backend, there is not way to realtime update the UI of the card that reflects that info, thinking in something like a websocket style.  Do you know if there will be a server event that I can push to the card? I can always do a timelly pulling from the Card to the Server, but this is super inefficient.

- While there isn’t a direct UI hook for new associations, you can use the onCrmPropertiesUpdate action to track property changes on the current record.

---> That would be useful, but Properties Updates works in the Object properties, it does not refelcet associations changes. 

- Including a refresh button in your card that calls useAssociations to re-fetch data can also be effective.

---> Yes, I have that, but it is not the best User experience.

Currently, the UI extensions SDK doesn't offer a real-time hook for association changes, I'd recommend to share this via the HubSpot Developer Feedback Form here. Or I can submit it on your behalf if that helps, just let me know. Your feedback is always appreciated.

---> Please feel free to submit it, I would really appreciate it. I think this will enhance the new UI Extensions a lot.

[BérangèreL]

Hi @dgomez-dev and Happy Friday! To start with, I'm happy to share that I did submit the feedback form on your behalf so that our Team can review it.

For the remaining items, at the moment, the UI Extensions SDK doesn’t provide a real-time trigger specifically for association changes.

Here are the options available right now:
 

- Webhook subscriptions: You can listen for object.associationChange events on the backend.

- onCrmPropertiesUpdate action: This covers property changes, but not association updates.

- Manual refresh: Use the useAssociations hook along with a refresh button for updated info.

Currently, there isn’t a real-time, websocket-style update for UI cards when associations change. Also, the SDK’s refreshObjectProperties method is focused on refreshing property data and CRM data components, so it doesn’t capture association-based updates.
 

If you’re looking for enhanced real-time capabilities for associations, you might want to share this as a feature request.
For new feature suggestions, I'd recommend first to search and check if this idea is already present on our Ideas Forum here. If you find a similar idea, give it an upvote and share your unique use case in the comments.

If the idea doesn't exist already, please consider posting and creating a new Idea on our Ideas Forum here.

Thank you for being part of the discussion!

Have a lovely weekend!
Bérangère

This post was created with the assistance of AI tools

[chighsmith]

Hi @dgomez-dev,

Thank you for posting to the Community!

I understand that you’re looking for a React hook or similar functionality in the HubSpot Deal UI to detect when a user adds a new associated record so you can update a third-party app card in real time without relying solely on backend webhooks.

I don't believe that we have this functionality at this time however, I'd like to tag in some Champions to see if they have any workarounds -- Hi @CateDuarte @HubSpot_Corey @louischausse Do any of you know if this is possible? If not, do you have any suggestions for @dgomez-dev?

Cassie, Community Manager