Initialize script in componentDidMount – runs every route change












0
















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>
)}
/>
)









share|improve this question
























  • Does Marquee3k have a way to uninitialize? If so you'd have to call it in componentWillUnmount to clean up.
    – Sung Kim
    Nov 12 '18 at 19:17












  • @SungKim It does not. But even if it did, I suppose destroying and then running it again would cause a jump/stutter in the marquee effect?
    – INT
    Nov 12 '18 at 20:35
















0
















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>
)}
/>
)









share|improve this question
























  • Does Marquee3k have a way to uninitialize? If so you'd have to call it in componentWillUnmount to clean up.
    – Sung Kim
    Nov 12 '18 at 19:17












  • @SungKim It does not. But even if it did, I suppose destroying and then running it again would cause a jump/stutter in the marquee effect?
    – INT
    Nov 12 '18 at 20:35














0












0








0









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>
)}
/>
)









share|improve this question

















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>
)}
/>
)






reactjs gatsby






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 12 '18 at 19:14









Sung Kim

17.4k33111161




17.4k33111161










asked Nov 12 '18 at 19:13









INTINT

27921036




27921036












  • Does Marquee3k have a way to uninitialize? If so you'd have to call it in componentWillUnmount to clean up.
    – Sung Kim
    Nov 12 '18 at 19:17












  • @SungKim It does not. But even if it did, I suppose destroying and then running it again would cause a jump/stutter in the marquee effect?
    – INT
    Nov 12 '18 at 20:35


















  • Does Marquee3k have a way to uninitialize? If so you'd have to call it in componentWillUnmount to clean up.
    – Sung Kim
    Nov 12 '18 at 19:17












  • @SungKim It does not. But even if it did, I suppose destroying and then running it again would cause a jump/stutter in the marquee effect?
    – INT
    Nov 12 '18 at 20:35
















Does Marquee3k have a way to uninitialize? If so you'd have to call it in componentWillUnmount to clean up.
– Sung Kim
Nov 12 '18 at 19:17






Does Marquee3k have a way to uninitialize? If so you'd have to call it in componentWillUnmount to clean up.
– Sung Kim
Nov 12 '18 at 19:17














@SungKim It does not. But even if it did, I suppose destroying and then running it again would cause a jump/stutter in the marquee effect?
– INT
Nov 12 '18 at 20:35




@SungKim It does not. But even if it did, I suppose destroying and then running it again would cause a jump/stutter in the marquee effect?
– INT
Nov 12 '18 at 20:35












1 Answer
1






active

oldest

votes


















0














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.






share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53268644%2finitialize-script-in-componentdidmount-runs-every-route-change%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    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.






    share|improve this answer


























      0














      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.






      share|improve this answer
























        0












        0








        0






        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.






        share|improve this answer












        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.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 13 '18 at 9:44









        INTINT

        27921036




        27921036






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53268644%2finitialize-script-in-componentdidmount-runs-every-route-change%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Florida Star v. B. J. F.

            Danny Elfman

            Retrieve a Users Dashboard in Tumblr with R and TumblR. Oauth Issues