React portals!

React 16 is here!
This new version is extremely interesting not just because it has some new cool features, but it's a complete rewrite from the start!
It's fascinating how well TDD (Test Driven Development) can work in real-lief, huge projects like React itself, since the aim was to create the new React while fixing all the tests that the "old" React had. And they did it! Step by step, day by day, with hard work, but they did it. And even new features! Kudos to the React team and especially Dan Abramov!
There are few new features like:

• fragments and string: basically don't have to return one single elemnt in render
• better error handling: the new <ErrorBoundary><MyComponenentWhichCouldError /></ErrorBoundary> component which "polyfills" the wrapped component with a new lifecycle method called componentDidCatch which works like a catch{..} in JS
• Portals: later in this article
• Better server side rendering: for me this is not a big change since I haven't really used SSR :P
• Support fro custom DOM attributes: unrecognized React HTML and SVG elements are passed through the DOM now
• Reduced file size
• MIT license
• New core architecture(Fiber): featuring async rendering which is basically a two step rendering mechanism with a commit and render phase. Here is a demo: https://build-mbfootjxoo.now.sh/ -- mind the square in the top right corner!

Let's talk a bit more about portals.

These are meant to solve out of the parent component communication, which could be done before but it was a bit hacky.

Now we can define a component which is going to refer to a DOM component which is not is not under the parent component (basically out of the current component's reach). This component is going to use a portal to refer to a DOM component.

Now we can use the component defined above in another React component without even knowing it's using porals! Neat!

Here is an example based on this pen. Mind that there is a component which is using a portal (Modal) and the other one (App) does not know Modal is using portals, and it is using it.

See the Pen React portals modal example ! by Adam Nagy (@nagyadam2092) on CodePen.