Applicationinsights-js: Don't work with React HOOKS

[ecatugy]

Please send suport for React Hooks, components class is obsolete.

[veerprabakar]

Please support the function components with hooks.

[enterpriseSoftware]

Yes I would suggest a hooks implementation ASAP for react since that is the direction it's headed.

[khowling]

wrote a custom hook to replace withAITracking, seams to work ok, i have a 'key' paramter because i have a tabbed UI in the component i am tracking, and the key is the tab state

function useAITracking(componentName, key) {
useEffect( () => {
let start= new Date()
return () => {
reactPlugin.trackMetric({
average: (new Date() - start)/1000,
name: 'React Component (seconds)',
sampleCount: 1
}, { 'Component Name': componentName, 'Navigation': key });
};
}, [componentName, key])

}

[aaronpowell]

I've done a write up on how you can create custom hooks to work with AppInsights, you'll find it here: https://dev.to/aaronpowell/combining-react-hooks-with-appinsights-5692

In it there is a Context, allowing you to useContext to access the React plugin, a hook for tracking a normal event (using trackEvent for AppInsights) and one for doing metric tracking like the HOC does.

Does it look like what people would expect from a programmatic model of AppInsights + Hooks?

[MSNev]

Included in v 2.5.5 which is now fully deployed

[fab7jj]

@aaronpowell @MSNev is there any official documentation on how to use the new stuff for react hooks?

[las3r]

I second this question. Is there any documentation?

[aaronpowell]

Docs have been written and are currently being reviewed by our content team. Fingers crossed they should be available soon.

[aaronpowell]

Docs are now published - https://docs.microsoft.com/en-us/azure/azure-monitor/app/javascript-react-plugin#using-react-hooks

[las3r]

thanks for this!

[dps88]

@aaronpowell It would be great to have those docs in the react Readme.md as well

[aaronpowell]

Good suggestion @dps88. I've opened a PR to add it.