score:3

the reason this appears wonky is related to using <strictmode> in your index.html file. if you remove <strictmode> you'll see your code works the way you expect. but don't do that, you really do have a bug.

react wants functional components to be idempotent, meaning they do not have side effects. to help you catch side-effects, react will call your code twice back to back when it renders. see strict mode by doing this, it helps uncover subtle issues like the one you're currently experiencing.

one solution is to create the random colors once using useeffect(). another is to generate the colors outside the functional component.

update please mark the answer as 'accepted' if it solves your issue. you are correct. usememo will save the computation so it will not be re-computed unless dependencies change. however, react is purposely calling your code twice (in debug mode only) to help you catch unintentional side effects in your classes or hooks. when using strict mode, it's as if you have two of the component instead of one. i.e.

/* strictmode in debug */
<strictmode>
  <app/>
</strictmode>

/* ... be like this: */
<>
  <app/>
  <app/>
</>

if you (temporarily) remove the <strictmode> tag you'll see your code works as expected. and if you add code that causes your component to render again (e.g. a click counter) your usememo should prevent the cells from being regenerated each render.

add a console log to print every time createrandomcolors() is called. since your code is being called twice, you should see the debug log appear twice, but you don't. why not? react surpasses the console.log the 2nd time it calls your code.

at the top of your code (line 3) add const log = console.log, then replace everywhere you use console.log with just log and you'll have the full picture of what's occurring.

keep experimenting. we've all been here.


Related Query

More Query from same tag