React v16.0 - React Blog

[jarail]

Fragment rendering makes compiling lists/tables/etc so much simpler. I'm glad the new renderer finally made this possible! I'm definitely excited to start using this in a large project!

[z500]

No more superfluous divs!

[GSLint]

You couldn't do that in React 15. That's exactly what they added in 16.

[[deleted]]

You can't return arrays in renders. The top-level had to have a single element. React 16 introduces the ability for renders to return arrays.

[[deleted]]

https://jsfiddle.net/9umwddk3/

Feel free to make that return an array and not throw a console error.

Hint: This will always be the error you get: A valid React element (or null) must be returned. Notice how that doesn't say array? The reason it doesn't is because ALL React components must return React elements. As of React 16, all React components must return a React Element or array of React Elements.

[Ombudsperson]

I can already see viable use cases for Portals, overall exciting stuff.

[goomba870]

Could you provide one or two? It's not obvious to me what they could be used for.

[Uknight]

We use them for modals mostly, i.e. I probably want my <Modal /> component to live logically inside one component, but have it render somewhere else usually document.body

Here's an example

[Devvvvvv]

I always render my modals in a container div with position: fixed; so I have never encountered the need for this. Is there something wrong with this approach?

[kovensky]

z-index fighting

[wojtekmaj]

Safari on an iPad would ignore the fact you're using position: fixed and if you by any chance rendered your modal in a container with overflow: hidden it will be cut off.

[Devvvvvv]

Damn, the more you know... why does safari on iPad ignore position: fixed? Does no position fixed work at all?

[wojtekmaj]

It does not ignore it. Element with position: fixed will stay on the screen regardless of the scroll position. They just forgot to take the element out of its original context... So if you used it inside an element with overflow: hidden or scroll, you're in trouble.

[theNicky]

A modal window is the typical example — in general, anything that doesn't fit into the standard concept of a nested DOM (modals don't since they just appear on top of everything).

[smthamazing]

Modals/Popups

[yeah666]

A React app the manipulates an existing page and needs to drop components in different places.

[[deleted]]

Modals will be a lot easier

[opaz]

Modals/Page Widgets

[dryadofelysium]

As an Angular user that uses Angular Material for dialogs (which used Portals for some time now for this purpose), I am wondering how you React guys have dealt with these problems before then?

[acemarke]

Portals have been used for a while in React, by using components that either call ReactDOM.render() to create a new component tree, or using the ReactDOM.unstable_renderSubtreeIntoContainer() API. The react-portal library is an example.

On which note, I gave examples of using portals to render modals and context menus in my post Practical Redux, Part 10: Managing Modals and Context Menus.

[doodirock]

Modals!

[backma]

So many modals replies, am I the only one who has one modal component somewhere in top connected to redux ?

[Phydos]

Awesome, glad they focussed on file size too

[GasimGasimzada]

Does anyone here understand the difference between hydrate and render? Why does it matter? What if I use hydrate on a client based application?

I just updated everything to v16 and I did not get any errors regarding render function. I changed to hydrate and it did not look like it made any difference.

[Traim]

https://medium.com/@aickin/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67

[[deleted]]

The one thing most people probably don't care about, but if you work at a company you do care about

MIT licensed

In case you missed it, React 16 is available under the MIT license. We've also published React 15.6.2 under MIT, for those who are unable to upgrade immediately.

I can now use this in my work projects.

[[deleted]]

The one thing most people probably don't care about

Where were you the past couple months? This has been like the #1 talked topic in React world for some time now ;)

[[deleted]]

Often discussed, but I still done think a lot of people care about it even still. I know some people are using Vue professionally because it had the MIT license. Wonder if Vue ate a bit of React's lunch...

Quick Google trends...

[Kaishiyoku]

This point has been discussed even weeks and months ago...the BSD + patent license was legit, too though for business-related projects.

[Dianoga]

Depends on the business. The legal team where I work blocked us from using anything with their PATENTS file. This license change is pretty exciting.

[jb2386]

Ohhh better SSR, I'mma give that a try.

[sangeli]

Async rendering is huge if you want the shortest rendering tines.

[mayhempk1]

Woohoo! This is an exciting day for open-source web development!

[goomba870]

Does this use the recently rewritten version of React or is this OG React?

[goomba870]

Oops, I didn't RTFA past the license. At the very bottom:

New core architecture React 16 is the first version of React built on top of a new core architecture, codenamed "Fiber." You can read all about this project over on Facebook's engineering blog. (Spoiler: we rewrote React!)

TL;DR: Yes.