`next/app` as functional component

[dmitrizzle]

Feature request

Problem

Functional components yield a more performant and readable code. It's been hinted by React team that class'es may be split into a separate package in the near future. It would be nice for Next.js to provide a way to create apps without classes. Currently it's not possible as _app.js and _document.js require to extend Next's React classes.

Solution

If Next's controlling components can be rewritten with React Hooks, the entire Next app should consist of functional components by default. Perhaps we could have a version that uses that style as an opt-in for backwards compatibility.

Alternative

I am considering rewriting the above-mentioned components in my project folder, but I fear that it may cause some issues.

Additional context

This is pretty much it.

[tsaiDavid]

This would be great! Would love to be able to use hooks in _app.tsx!

[medmin]

Yep, functional component is the trend

[timneutkens]

@medmin please don't spam issues.

You can already use hooks in _app.js by doing:

import React from 'react'
import App from 'next/app'

function MyComponent({children}) {
  // You can use hooks here
  return <>{children}</> // The fragment is just illustrational
}

class MyApp extends App {
  // Only uncomment this method if you have blocking data requirements for
  // every single page in your application. This disables the ability to
  // perform automatic static optimization, causing every page in your app to
  // be server-side rendered.
  //
  // static async getInitialProps(appContext) {
  //   // calls page's `getInitialProps` and fills `appProps.pageProps`
  //   const appProps = await App.getInitialProps(appContext);
  //
  //   return { ...appProps }
  // }

  render() {
    const { Component, pageProps } = this.props
    return <MyComponent>
      <Component {...pageProps} />
    </MyComponent>
  }
}

export default MyApp

We've already made changes to Next.js to allow the exported component itself to be a functional component. However this would break withRouter as that still uses legacy context for backwards compat reasons.

[dmitrizzle]

@timneutkens do you mean It'll break withRouter wherever it's being used, or just with _app.js?

[timneutkens]

Whenever it's being used. Mostly related to Apollo and it's tree traversing (if you're using Apollo). Hence why we can't get rid of the extending of the original next/app yet.

[mikestopcontinues]

@timneutkens Can you expand on the issue? Or point to somewhere it's discussed? Also, what's the plan to move forward?

[timneutkens]

@mikestopcontinues it's been solved since my last comment and the latest release of Next.js (9.1.2). I've opened a PR to update the docs.

[mikestopcontinues]

Very cool. Thanks!