Generates class while README suggested functional component

Subject of the issue

If you try to generated code from a string of Markdown using the @mdx-js/mdx-package it’s returning a class component instead of a functional component as suggested in the README file.

Your environment

ProductName: Mac OS X ProductVersion: 10.14.2 BuildVersion: 18C54

@mdx-js/mdx: 0.16.6 Node: v11.6.0 NPM: 6.5.0 Yarn: 1.12.3

Steps to reproduce

I am trying to the following:

  let transformedFunction = mdx.sync(`
  # Hello, MDX
  
  I <3 Markdown and JSX
  `)

this returns:

export default class MDXContent extends React.Component {
  constructor(props) {
    super(props)
    this.layout = null
  }
  render() {
    const { components, ...props } = this.props

    return <MDXTag
             name="wrapper"
             
             components={components}><MDXTag name="h1" components={components}>{`Hello, MDX`}</MDXTag>
<MDXTag name="p" components={components}>{`  I <3 Markdown and JSX
`}</MDXTag>
           </MDXTag>
  }
}

Expected behaviour

I would expect it returns the suggested code as listed in the README file:

export default ({components, ...props}) => <MDXTag name="wrapper"  components={components}><MDXTag name="h1" components={components}>{`Hello, MDX`}</MDXTag>
<MDXTag name="p" components={components}>{`I <3 Markdown and JSX`}</MDXTag></MDXTag>

Actual behaviour

See above

[johno]

Of course 😄.

The reason is the previous functional version evaluated layouts inline of the render function. This caused the layout component to remount on every render if you declared a layout as an inline function like so:

# Hello, world

export default props => <div {...props}>

This caused unnecessary rerenders, but more importantly also broke things like hash links due to remounting.

By using a class-based component we memoize it as an attribute in the class. Though, I suspect we can now do this more cleanly with React.memo which was released in v16.6 🤷‍♀️

Hope that helps!

[johno]

Going to close this since it’s being tracked in #389 as well. v1 will move back to a functional component.