Need to add ComponentDidMount to stateless function

Question

I need to add this, but componentDidMount() isn't recognized because my component below is stateless and I'm not sure how I would extend it or whatever best practice would be here?

Below is my component -

export default ({ children, meta, title }) => {
  
  return (
    <StaticQuery
      query={graphql`
        query IndexLayoutQuery {
          settingsYaml {
            siteTitle
            siteDescription
            googleTrackingId
            socialMediaCard {
              image
            }
          }
          allPosts: allMarkdownRemark(
            filter: { fields: { contentType: { eq: "postCategories" } } }
            sort: { order: DESC, fields: [frontmatter___date] }
          ) {
            edges {
              node {
                fields {
                  slug
                }
                frontmatter {
                  title
                }
              }
            }
          }
        }
      `}
      render={data => {
        const { siteTitle, socialMediaCard, googleTrackingId } =
            data.settingsYaml || {},
          subNav = {
            posts: data.allPosts.hasOwnProperty('edges')
              ? data.allPosts.edges.map(post => {
                  return { ...post.node.fields, ...post.node.frontmatter }
                })
              : false
          }

          

        return (
          
          <Fragment>
            <Helmet
              defaultTitle={siteTitle}
              titleTemplate={`%s | ${siteTitle}`}
            >
              {title}
              <link href="https://ucarecdn.com" rel="preconnect" crossorigin />
              <link rel="dns-prefetch" href="https://ucarecdn.com" />
              {/* Add font link tags here */}
            </Helmet>

            <Meta
              googleTrackingId={googleTrackingId}
              absoluteImageUrl={
                socialMediaCard &&
                socialMediaCard.image &&
                socialMediaCard.image
              }
              {...meta}
              {...data.settingsYaml}
            />

            <GithubCorner url="https://github.com/thriveweb/yellowcake" />

            <Nav subNav={subNav} />

            <Fragment>{children}</Fragment>
            <Footer />
          </Fragment>
        )
      }}
    />
  )
}

I need to add this, but componentDidMount() isn't recognized because me component above is stateless and I'm not sure how I would extend it or whatever best practice would be here?

Thanks in advance!

async componentDidMount() {
    try {
        const deckdeckgoHighlightCodeLoader = require("@deckdeckgo/highlight-code/dist/loader")
        await deckdeckgoHighlightCodeLoader.defineCustomElements(window);
    } catch (err) {
        console.error(err);
    }
}

Answer 1

you can use useEffect in react-hook

example :

 useEffect(() => {
         //code here
    } ,[])

Answer 2

you can make functional component stateful using react hooks, check the reactjs doc for more. the following code can do what componentDidMount do in class component

useEffect(()=>{
//your code here...

},[])

Answer 3

In functional components you use hooks to access react lifecycles. For side effects the useEffect hook is used, you code would look like this with useEffect.

Edit: It should be this instead

import { useEffect } from 'react'

useEffect(() => {
    async function loader() {
        try {
            const deckdeckgoHighlightCodeLoader = require("@deckdeckgo/highlight-code/dist/loader")
            await deckdeckgoHighlightCodeLoader.defineCustomElements(window);
        } catch (err) {
            console.error(err);
        }
    }
    loader();
}, [])