gatsby-plugin-layout is still re-rendering layout

Created on 19 Dec 2018 · 5Comments · Source: gatsbyjs/gatsby

I am using the gatsby-plugin-layout to prevent my material-ui header from re-rendering to allow for its tab animations to run, however, my layout component continues to re-render. Am I missing anything?

in gatsby config:

{
   resolve: `gatsby-plugin-layout`,
   options: {
     component: require.resolve(`${__dirname}/src/components/layout`),
},

layout:

import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
...

class Layout extends React.PureComponent {
  state = {
    value: false,
  }

  handleChange = (event, value) => {
    this.setState({ value })
  }

  checkPage = pathname => {
    const page = pathname.split('/', 3)[1]
    if (page === 'sensor' || page === 'pricing') {
      return page
    }
    return false
  }

  render() {
    const { children, classes } = this.props
    return (
      <div>
        <Location>
          {({ location }) => {
            const pathname = location.pathname
            return (
              <div>
                <Helmet
                  meta={[
                    { name: 'description', content: 'Sample' },
                    { name: 'keywords', content: 'sample, something' },
                  ]}
                >
                  <html lang="en" />
                </Helmet>
                <AppBar className={classes.appBar}>
                  <Grid container alignItems="center" justify="space-between">
                    <Grid item xs={4}>
                      <Logo className={classes.logo} />
                    </Grid>
                    <Grid item xs={4}>
                      <Tabs
                        fullWidth
                        value={this.checkPage(pathname)}
                        onChange={this.handleChange}
                        className={classes.tabs}
                      >
                        <Tab
                          className={classes.tab}
                          label="sensor"
                          component={Link}
                          to="/sensor"
                          value="sensor"
                        />
                        <Tab
                          className={classes.tab}
                          label="pricing"
                          component={Link}
                          to="/pricing"
                          value="pricing"
                        />
                        <Tab
                          className={classes.tab}
                          label="about"
                          component={Link}
                          to="/about"
                          value="about"
                        />
                      </Tabs>
                    </Grid>
                    <Grid item xs={4} />
                  </Grid>
                </AppBar>
                <div
                  style={{
                    margin: '0 auto',
                    maxWidth: 960,
                    padding: '0px 1.0875rem 1.45rem',
                    paddingTop: 100,
                  }}
                >
                  {children}
                </div>
              </div>
            )
          }}
        </Location>
      </div>
    )
  }
}

export default withRoot(withStyles(styles)(Layout))

page wrapped by layout:

import React from 'react'
import { Link } from 'gatsby'

import Layout from '../components/layout'

class Pricing extends React.PureComponent {
  render() {
    return (
      <Layout>
        <h1>Hi from the second page</h1>
        <p>Welcome to pricing</p>
        <Link to="/">Go back to the homepage</Link>
      </Layout>
    )
  }
}

export default Pricing

question or discussion

Source

ColinTS

Most helpful comment

You don't need to wrap your page with<Layout>, the plugin will take care of this for you

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-layout/src/wrap-page.js

dbrookes on 19 Dec 2018

👍3 ❤2

All 5 comments

You don't need to wrap your page with<Layout>, the plugin will take care of this for you

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-layout/src/wrap-page.js

dbrookes on 19 Dec 2018

👍3 ❤2

Hey @ColinTS

Sorry about the confusion. Like @dbrookes correctly mentioned, you don't need to explicitly wrap your pages if using the plugin since it reimplements v1 behaviour. More details here.

Does this fix your issue?