problem with dangerouslySetInnerHTML

Information:

• Prism version: [1.24.1]
• Plugins: [a list of plugins you are using or ‘none’]
• Environment: [React.js and next.js]

Description I installed primsjs via yarn, and add it to my blog and it’s working, the problem is that the message below appears:

Warning: Prop dangerouslySetInnerHTML did not match. Server: post…

Example

import PostStyle from "./post-styles.module.css";
import styles from "./style.module.css";
import CardImage from "../../Molecules/CardImage";
import Prism from "prismjs";
import { useEffect } from "react";
type Props = {
  content: string;
  thumbnail: string;
  title: string;
};

const PostBody = ({ content, thumbnail, title }: Props) => {
  useEffect(() => {
    Prism.highlightAll()
  }, []);
  return (
    <>
      <CardImage src={thumbnail} alt={title} />
      <article className={styles.section__article}>
        <div
          className={`${PostStyle["post"]}`}
          dangerouslySetInnerHTML={{ __html: content }}
        />
      </article>
    </>
  );
};

export default PostBody;

[mAAdhaTTah]

Your initial solution might be fine if you disable automatic highlighting with Prism.manual = true. The problem is the highlight in your initial useEffect isn’t actually the first highlight, and it’s happening before React runs, hence the mismatch.

[RunDevelopment]

I got it using useState and useEffect

That’s an even better solution.

but I’m not sure it’s performatico.::

React should be smart enough to cache things here. Should be fine.