Gatsby and React 16.0.0

[baseten]

React 16.0.0 was released a few weeks ago now and I've been successfully using it with Gatsby so far. The only major difference I'm aware of at the moment is the way server rendering is handled will cause a potential performance problem on the client side.

Changes are described here, but the main issue I'm noticing is the new server renderer has completely done away with data-reactid (I guess this means the difference between ReactDOMServer.renderToString() and ReactDOMServer.renderToStaticMarkup() is now very minimal). On the client side if you want to rehydrate server rendered HTML there is now a separate method: ReactDOM.hydrate() rather than ReactDOM.render(). I would assume that this should be a complete drop in replacement on the client side, as Gatsby will always produce server rendered static markup?

I'm happy to have a go at doing a pull request on this if you point me in the right direction?

[varunkumar]

Any progress on this so far?

[KyleAMathews]

Missed this issue :-)

You can use React 16 today with this plugin: https://www.gatsbyjs.org/packages/gatsby-plugin-react-next/

To my understanding, render still works just fine in React 16 for hydrating (but will be removed in 17) https://github.com/facebook/react/blob/94f44aeba72eacb04443974c2c6c91a050d61b1c/packages/react-dom/src/__tests__/ReactRenderDocument-test.js#L40

With Gatsby v2, we'll ship React 16 by default and use hydrate.

[varunkumar]

When is v2 expected to be available?

[KyleAMathews]

Soonish :-)

[i8ramin]

Is v2 still "Work in Progress"?

[KyleAMathews]

@i8ramin yeah, checkout the project for it @ https://github.com/gatsbyjs/gatsby/projects/2

[i8ramin]

Yep. Found it while digging around the repo! Thanks. Looking very much forward to it. Been messing around with this CMS called Scrivito CMS (scrivito.com), which was recently featured on the Netlify blog (https://www.netlify.com/blog/2018/02/26/built-on-netlify-deploy-a-site-with-scrivito-cms/) ... and trying to see what it takes to have it work with a GatsbyJS site. Will let you know how it goes.

Update: Was able to get the scrivito react components to load up by using this gatsby-plugin-react-next plugin (https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-react-next). baby steps.

[franva]

It seems that Gatsby V2 is still far away according to what I saw on the JIRA-like task board.
Hopefully it comes soon~!

Love Gatsby~!

[slorber]

Hey, there's ability to replace ReactDOM.render with ReactDOM.hydrate in newest release. Didn't test this, so can't provide feedback on that yet.

https://www.gatsbyjs.org/docs/browser-apis/#replaceHydrateFunction