A gotcha in ReactDom.hydrate method

It is a common practice to do server side rendering and hydrating DOM on client using reactjs. Perhaps what is not common is rendering different things on server and client side. One example I can think of for that is ads, you probably wouldn't want to render ads on server side.

If you add more things to your dom only on client side, you may notice that some of your elements are omitted by react. That is caused by reactjs thinking some elements you render are some of the previous elements that got rendered before. In order to overcome this problem having a new state variable like isClient and rendering those elements only if isClient true. And you can initialize your state variable as usual:

useEffect(() => { setIsClient(true); }, []); 

It is quite cryptic to solve this issue otherwise since there is no warnings about it.