How to shuffle an array once in functional react component?

Question

I am creating a memory game, i have a shuffle function that shuffles an array of numbers, these numbers are rendered as cards, the problem is that the cards are shuffled every time state changed, i need to only initialize my component with a shuffled array that persists even state is changed!

i tried useEffect, but it doesn't work, or i couldn't implement it correctly

code:

const numbers = [1, 2, 3, 1, 2, 3];

const shuffle = (arr) => {
//shuffle logic here
}

let shuffledCards;
useEffect(() => {
   shuffledCards = shuffle(numbers) // it doesn't help
}, [])

return(
  <cards shuffledCards={shuffledCards} />
)

how can i shuffle my array once instead of every time state is changed!

hackape · Accepted Answer · 2020-04-17 03:59:36Z

4

You can use useMemo hook.

const shuffle = (arr) => {
  //shuffle logic here
}

const shuffledCards = React.useMemo(() => {
  const numbers = [1, 2, 3, 1, 2, 3];  
  return shuffle(numbers);
}, [])

return (
  <cards shuffledCards={shuffledCards} />
)

edited Apr 17, 2020 at 3:59

answered Apr 17, 2020 at 3:40

hackape

20.3k2 gold badges34 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Code Eagle Over a year ago

at first glance i thought useMemo is a helper from another API, but then realized that it is part of react, thank you

arisu Over a year ago

I saw the docs, and it says, "You may rely on useMemo as a performance optimization, not as a semantic guarantee." So, maybe we shouldn't use it? Is it safe?

hackape Over a year ago

@Faris hmm guess it’s not safe anymore, especially for this case.

Drew Reese · Accepted Answer · 2020-04-17 04:03:45Z

1

Your function is redefining your array shuffleCards each render. If you place the array into state it will be stable.

Define numbers and shuffle outside component as initial state and utility function

const numbers = [1, 2, 3, 1, 2, 3];

const shuffle = array => {
  // shuffle logic
};

Component logic: Initialize state and use the effect to shuffle the array on component mount

const CardShuffler = () => {
  const [shuffledCards] = useState(shuffle(numbers)); // initialize state

  return <Cards shuffledCards={shuffledCards} />;
};

edited Apr 17, 2020 at 4:03

answered Apr 17, 2020 at 2:59

Drew Reese

207k20 gold badges283 silver badges293 bronze badges

4 Comments

Code Eagle Over a year ago

thank you, but, i implemented the solution, cards start every time with same numbers, i need when to refresh the page starts with cards with shuffled numbers every time, but not with state change, you can imagine i am creating a memory game!

Code Eagle Over a year ago

it worked after i stored that part shuffle(numbers) in a variable and then use it as an argument for setShuffledCards

hackape Over a year ago

If you handle the case when shuffledCards = null in <Card /> then this solution also solve your problem.

Drew Reese Over a year ago

@CodeEagle It took me a moment to understand what you meant, here's a version that also factors out the shuffle function to be called as an initialization function for useState. At this point though it's nearly pointless to store it in state only to be passed on to Cards, but perhaps you have more logic going on and what you shared here is just a minimal snippet.

Collectives™ on Stack Overflow

How to shuffle an array once in functional react component?

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related