add raw HTML with [removed] inside Gatsby React page

Question

I am trying to add an external embed code to my Gatsby page.

I currently use

import React from \'react\'
import Link from \'gatsby-link\'


let test          


        

Answer 1

There is another way, which is creating a React's effects:

import { useEffect } from 'react'

const useGoogleAnalytics = () => {

    useEffect(() => {
        // GA Snippet
    }, [])

    return null
}

And then you can use useGoogleAnalytics() in the page components you want to include.

The main advantage of this are:

• You get transpilation of the code
• It's way easier to maintain for more complex code than inside a template literal.

For simple scripts like Google Analytics I'd go for a template literal, but for custom and subject-to-change snippet I'd prefer an effect. As long as you don't abuse of those, It should not impact performance nor create overhead.

Does anyone see other disadvantages with this other method?