this is what I get

Easiest way I found for things that can't be hydrated on the backend and are purely client-side rendered is to add something that checks for dom being loaded before rendering. The useEffect only triggers once initially loaded in browser, so makes hydration render it as an empty and will compare to initial state as empty and not freak out.

  const [domLoaded, setDomLoaded] = useState(false);
  useEffect(() => setDomLoaded(true), []);

  return (
    <>
      {domLoaded ? <div>....

In this example it’s not valid to nest a h2 in a p tag.

yoo same thing but different error

Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching <h1> in <div>.

how do i fix? and idek what is wrong, no clue what this error means

The client rendered a h1 inside a div that the server did not. This is invalid DOM nesting. If you check the browser console you get a stacktrace where this happened

it really confuses me beacuse the error started when first i used a state from a redux slice, with useSelector, then i used that state in a h1 as a string with text, everything worked good, when i removed it... boom error, so now the error gets removed when i add the redux state back to the h1 like it first was???

its so weird

could it be that when i used the state from redux, a file gets created which contains that h1 with the state string inside so if i remove it i also need to manually remove wherever the file is located