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

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

Answer 2

You should wrap your JSX in the following component:

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

const NoSsr = ({ children }): JSX.Element => {
  const [isMounted, setMount] = useState(false);

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

  return <>{isMounted ? children : null}</>;
};

export default NoSsr;

Like this:

<NoSsr>
 <YourJSX />
</NoSsr>

Answer 3

If you are working with NEXTJS this might be a good approach, you can check the documentation here as well, also if you are working with data-event, globalEventOff or any other prop and is not hiding or not working in your localhost, this only occurs in Development Strict Mode. ReactTooltip works fine in Production code with React 18. So you can set reactStrictMode : false, in your next.config.js to test it locally and then set it back to true, hope this helps :) info reference here

import dynamic from 'next/dynamic'

const ReactTooltip = dynamic(() => import('react-tooltip'), { ssr : false });

function Home() {
  return (
    <div>
     <Button
      data-tip
      data-event="click focus"
      data-for="toolTip"
      onClick={():void => ()}
     />
     <ReactTooltip id="toolTip" globalEventOff="click"/>
    </div>
  )
}

export default Home