Odtnhj

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.