React-tooltip and Next.js SSR issue

Issue

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}
/>

Solution

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 :)

Answered By - lemurry