Ndtyjky

I am working on a navbar for my react app (using gatsbyjs to be precise). In the navbar I have a marquee that I initialize in the navbar component in componentDidMount.

It works as intended, but upon every route change componentDidMount will run again which results in the marquee speeding up for every page change, making it go faster and faster.

Is this expected behaviour? And if so, how do I make sure that the script is only run once?

navbar.js

import React from 'react';

import { Link } from 'gatsby';

import styles from '../styles/navbar.module.css';

import NewsMarquee from './newsMarquee';

import Marquee3k from 'marquee3000';



const topLevelNav = [

  {

    href: '/news',

    label: <NewsMarquee/>,

    extraClass: styles.navLinkNews,

    mediaQueryClass: styles.navLinkHiddenSmall,

  },

];



export default class Navbar extends React.Component {



  componentDidMount() {

    Marquee3k.init();

  }



  render() {

    return (

      <div>

        <header className={styles.navbar} role="banner">

          <nav className={styles.nav}>

            {topLevelNav.map(({ href, label, extraClass = '', mediaQueryClass = '' }) => (

              <Link

                key={label}

                to={href}

                className={`${styles.navLink} ${extraClass} ${mediaQueryClass} ${menuItemsHidden}`}

                activeClassName={styles.navLinkActive}

              >

                {label}

              </Link>

            ))}

          </nav>

        </header>

      </div>

    )

  }

}

newsMarquee.js

import React from 'react';

import { StaticQuery, graphql } from "gatsby";

import styles from '../styles/newsMarquee.module.css';



export default () => (



  <StaticQuery

    query={graphql`

      query {

        allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC } limit: 10) {

          totalCount

          edges {

            node {

              id

              frontmatter {

                title

                date(formatString: "YYYY.MM.DD")

              }

              fields {

                slug

              }

            }

          }

        }

      }

    `}

    render={data => (

      <div className={`marquee3k ${styles.marquee}`}>

      <div>

      {data.allMarkdownRemark.edges.map(({ node }) => (

        <span className={styles.marqueeItem} key={node.id}>

          {node.frontmatter.date} {node.frontmatter.title}

        </span>

      ))}

      </div>

      </div>

    )}

  />

)

Since I'm using GatsbyJS I went with this plugin from V1, which makes my layout component persist across pages.

gatsby-plugin-layout

This plugin enables adding components which live above the page components and persist across page changes.

This can be helpful for:

• Persisting layout between page changes for e.g. animating navigation


• Storing state when navigating pages


• Custom error handling using componentDidCatch


• Inject additional data into pages using React Context.

This plugin reimplements the behavior of layout components in gatsby@1, which was removed in version 2.