Next.js/React warning when generating random values in a component

Question

I'm building a next.js app that generates some random numbers which generates the warning:

Warning: Text content did not match. Server: "1" Client: "2"

I think I understand why I get this warning (the virtual DOM is kinda-sorta-out-of-sync with what was sent from the server). I'm just wondering if there's a way to let next.js/React know that this is ok in this situation. Or is there a way to only generate the random on the server and let the client use this as a literal?

Or should I just ignore the warning?

also have the same problem - have 'generated' value for link (it's intended), but can't find any solution to remove that warning from my console — andrey, Mar 01 '19 at 10:06
for nextjs questions, i'd recommend going to spectrum.chat and asking there, as a lot of the developers on there use next.js — alex067, Nov 26 '19 at 19:27
@Koen Did you ever find a solution to this? I'm running into the same problem. — Cully, Jan 29 '20 at 22:44
@Koen Thanks for the reply. I kinda found a workaround. Not ideal, but no more warning at least. https://stackoverflow.com/a/59976790/1526406 — Cully, Jan 30 '20 at 18:22

score 11 · Answer 1 · answered Apr 22 '20 at 18:05

Moving JavaScript random variable into React state solved the problem for me.

Here's my problem (simplified) before:

function RandomNumber() {
  const randomNumber = Math.floor(Math.random() * 100);
  return <p>{randomNumber}</p>;
}

After

function RandomNumber() {
  const [randomNumber, setRandomNumber] = useState(undefined);

  useEffect(() => {
    setRandomNumber(Math.floor(Math.random() * 100));
  }, []);

  return <p>{randomNumber}</p>;
}

My code used React Hooks useState and useEffect, but previous React lifecycle methods setState and componentDidMount should work fine too

score 1 · Answer 2 · answered Jun 03 '21 at 11:41

What I would suggest is that you wrap the content that you have some random generated content in, inside a component.

components/NoSsr.js

import dynamic from 'next/dynamic';
import React from 'react';

const NoSsr = ({ children }) => <>{children}</>;

export default dynamic(() => Promise.resolve(NoSsr), {
  ssr: false,
});

And then in your file:

<NoSsr>
    { Math.random() }
</NoSsr>

score 0 · Answer 3 · answered Oct 06 '22 at 08:24

0

I would do it with useMemo:

 const randomNumber = useMemo(() => Math.floor(Math.random() * 100), []);

answered Oct 06 '22 at 08:24

Jöcker

5,281
2
38
44

I'm doing this multiple times in a row on the server. I guess this code would give me the same number each time? – Koen Oct 06 '22 at 12:11
Depends on what you write in the dependency array. You can create an array of random numbers that gets updated ones your rows state update. – Jöcker Oct 06 '22 at 13:48
This does not solve the hydration issue. The problem is not memoization, it's the fact that the content pre-generated on the server does not match the content generated during hydration on the client-side. Forcing the random number to only be generated on the client is the solution (like the other answers mentioned). – juliomalves Oct 10 '22 at 22:37
I have similar problem with Array random, I tried memoizing, but that doesn't work for server. When I consoled inside memo with no deps, it consoled 4 times on server for me. Which is strange, as it shouldn't happen. – Lost Stranger Dec 22 '22 at 13:36

Next.js/React warning when generating random values in a component

3 Answers3