# Difference Between Hydration and Rendering in React
With the new release of React v17 on 22 October 2020, it appe# ars a lot of added features. Today our quest is to bring out the difference between Hydration and Rendering in React JS. Let me allow shedding light on this.
## What is ReactDOM
Before anything else, you need to understand the ReactDOM well.
**ReactDOM** is a package that presents DOM-specific methods, which can be used at the topmost level of a web app to facilitate an efficient way of managing **DOM** components of the web page.
To apply the **ReactDOM** in any React web app you must import ReactDOM first from the react-dom package. Here is the process.
```
import ReactDOM from 'react-dom'
```
However, both the `render()` and `hydrate()` functions are the modules for
the react-DOM package.
## Render()
#### ReactDOM. render (element, container [callback]).
The `render()` function is one of the most useful and important functions of
**ReactDOM**. it returns a reference to the component after rendering a React
element into the DOM in the provided container (or returns null for stateless
components).
If the React element was previously made into a container, this will update it
and only mutate the DOM as needed to represent the most recent React
element.
The optional callback will be executed after the component is made
or modified if it is given.
**Note that, **
- The contents of the container node you move in are controlled by
ReactDOM.render(). When the method is first called, any current DOM
elements are substituted.
- For efficient notifications, later calls use React's DOM diffing algorithm.
- The container node is not changed by ReactDOM.render() (only
modifies the children of the container). It's possible to add a
component to an existing DOM node without overwriting the children.
- At the moment, ReactDOM.render() returns a reference to the root
ReactComponent case.
However, since future versions of React can make components
asynchronously in some cases, using this return value is outdated and should
be avoided. Attaching a callback ref to the root element is the best way to
get a reference to the root ReactComponent case.
Let me go through a simple program that helps you understand the
implementation of rendering in ReactJS.
#### index.js
```
import React from 'react';
import ReactDOM from 'react-dom';
import app from './App';
ReactDOM.render(< App name = "Ryo"/>,
document.GetElementById("root"));
```
and
#### App.js
```
import React {fragment} from 'react';
const App = (props) => (
Hello, {props.name}
)
export default App;
```
Above these simple implements of the `render()`, function will display
`Hello, Ryo` in your browser.
ReactDOM.render() is obsolete and is replaced in React v17. Instead, try
hydrating().
Ref: [ReactDOM render()](https://reactjs.org/docs/react-dom.html#render)
#### Hydrate()
#### ReactDOM. hydrate(element, container [callback])
This function is similar to render(), but it's used to hydrate a container whose
HTML content is made by ReactDOMServer.
The `hydrate()` function is implemented while using server-side rendering. React will try to add event
listeners to the markup that already exists.
React assumes that the rendered content on the server and the client are
similar.
It can cover up inconsistencies in text content, but mismatches
should be treated as bugs and fixed.
React warns about hydration mismatches when in development mode. In the event of a mismatch, there
are no assurances that the gaps in attributes will be patched up.
Since mismatches are uncommon in most applications, validating all markup would
be prohibitively costly.
If the attribute or text content of a single element (for example, a
timestamp) is unavoidably different between the server and the client, you
may disable the alert by setting suppressHydrationWarning=`true` to the
element.
It's only good for one level and is meant to be an escape hatch.
Using it sparingly, React won't try to fix it unless it's text material, so it'll
probably stay inconsistent until future occurrence.
Now, let’s see how the same example works for **Server Side Rendering**
using the `hydrate()` function. Before that, you need to create the server file
which basically renders the HTML, and that server-rendered HTML will
hydrate at the client side. Here you go.
```
import express from 'express';
import path from 'path';
import React from 'react';
import ReactDOMServer from 'react-dom/Server';
import Hello from './public/component/Hello';
const app = express()
app.use('/static', express.static(path,resolve(_dirname,
'public')))
app.get('/', (req, res) => {
const name = 'Ryo is testing SSR'
const component = ReactDOMServer.renderingTString()
res.send(component)
})
app.listen(3000, () => {
console.log("The Server is running on port: 3000");
})
and now you can test the app through SSR.
import React from 'react';
const Hello = (props) => {
Hello, {props.name}
}
export default Hello;
```
and
```
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './component/Hello';
ReactDOM.hydrate(
,
document.GetElementById("root")
)
```
Now your browser should display it as `Hello, Ryo is testing SSR`
You can do a two-pass rendering if you need to render anything differently
on the server and the client.
A state variable like this can be read by components that make something
different for the client. ComponentDidMount will allow you to set state.isClient
to real().
This way, the first render pass would render the same content as the server,
preventing mismatches, but a second pass will happen synchronously after
hydration.
Since your components must be rendered twice, this method will
slow them down, so it should be used with caution.
Remember to consider the user's experience when using sluggish
connections.
#### Ref: [ReactDOM hydrate()](https://reactjs.org/docs/react-dom.html#hydrate)
Since the JavaScript code can load after the initial HTML render, the
transition may be jarring if you render anything different in the client-only
pass.
However, if done correctly, rendering a "shell" of the application on the
server and just showing some of the extra widgets on the client can be
helpful.
Refer to this article to learn how to do it without having markup
mismatch problems, you can make a reference to the already discussed
paragraph.
There are few more API-containing methods available in the ReactDOM
package.
They are worth discussing.
#### unmountComponentAtNode()
This function cleans up the event handlers and state of a mounted React
node in the DOM.
This role does not affect if no part has been placed in the
container.
If a part was unmounted, this method returns true; otherwise, it
returns false.
Syntax of this function is as follows:
```
ReactDOM.unmountComponentAtNode(container)
```
#### Ref: [ReactDOM unmountComponentAtNode()](https://reactjs.org/docs/react-dom.html#unmountcomponentatnode)
#### findDOMNode()
Note: findDOMNode is a way to get to the DOM node underneath. Since it
pierces the component abstraction, using this escape hatch is generally
discouraged. In StrictMode, it is no longer supported.
Syntax of this function is as follows:
```
ReactDOM.findDOMNode(component)
```
This function returns the corresponding native browser DOM element if this
item has been mounted into the DOM.
This method can be used to read values from the DOM, such as type field
values, and to calculate the DOM. In most instances, attaching a ref to the
DOM node is preferable to using findDOMNode.
findDOMNode returns null when a component is rendered null or false.
FindDOMNode returns a text DOM node containing the value of a component when it renders to a string.
A component can now return a fragment with multiple children, in which case findDOMNode will return the DOM node corresponding to the first non-empty child as of React 16.
Note:
- Only installed components are supported by findDOMNode (that is,
components that have been placed in the DOM). An exception will be
thrown if you try to call this on a component that hasn't been mounted
yet (for example, calling findDOMNode() in render() on a component
that hasn't been developed yet).
- On function components, findDOMNode isn't an option.
#### Ref: [ReactDOM findDOMNode](https://reactjs.org/docs/react-dom.html#finddomnode)
#### createPortal()
This function creates a gateway. Children can be made into a DOM node that
resides beyond the hierarchy of the DOM component using portals.
Syntax of this function is as follows:
```
ReactDOM.createPortal(child, container)
```
#### Ref: [ReactDOM createPortal()](https://reactjs.org/docs/react-dom.html#createportal)
### Wrapping Up
As the article says both the **render()** and **hydrate()** function are part of the
**ReactDOM** package, and these two functions To wrap it up, **ReactDOM** acts
as a powerful interface between React Js component tree and the DOM.
The most usually used method from ReactDOM is render() and hydrate() which
can be used to connect entire React applications to the client-side and
server-side.
Despite having all the above differences both the render() and
hydrate() method makes React js such a widely popular front-end
development library.
Thanks for spending your time reading the whole article. I believe, I was able
to make things clear to you. Any suggestion is heartily welcome.