React-tooltip and Next.js SSR issue

Question

I use the react-tooltip library in my Next.js app.

I noticed that every time I refresh a website while visiting a page that uses the tooltip I get an error:

react-dom.development.js:88 Warning: Prop `dangerouslySetInnerHTML` did not match.

CSS classes are different on the client and on the server

The weird part is I do not get that error while navigating from a random page to a page that uses the react-tooltip.

The tooltip related code:

<StyledPopularityTooltipIcon src="/icons/tooltip.svg" alt="question mark" data-tip="hello world" />
<ReactTooltip
    effect="solid"
    className="tooltip"
    backgroundColor="#F0F0F0"
    arrowColor="#F0F0F0"
    clickable={true}
/>

Answer 1

I had the same issue, I had to use state to detect when component has been mounted, and show the tooltip only after that.

P.S. You don't see the error when navigating, because the page is not rendered on server when you navigate, it's all front-end :)

Answer 2

In case you are using any server-side rendering (like Next.js) - you will need to make sure your component is mounted first before showing the react-tooltip.

I fixed this by using the following:

import React, { useEffect, useState } from 'react';

const [isMounted,setIsMounted] = useState(false); // Need this for the react-tooltip

useEffect(() => {
    setIsMounted(true);
},[]);
 
return (<div>
      {isMounted && <ReactTooltip id={"mytip"} effect={"solid"} />}

      <span data-tip={"Tip Here"} data-for={"mytip"}>Hover me</span>
</div>)