1

I recreated the official React Tutorial using hooks.

I finished the code, but noticed the app has an extra re-render.

My code can be found here: https://codepen.io/magnusriga/pen/BbdvPp?editors=0011

To Reproduce the Issue

  1. Run the below CodePoint code
  2. Click in any random square
  3. Click the bottom-most button: Go to move #1
  4. See the console: The component re-executes (meaning it re-rendered)
  5. Note: If you click it additional times, no additional renders occur

Question 1

How do I remove the above extra re-render?

Question 2

If you look at the console in DevTools you will see that Game also renders twice on every single click. This does not show up in the CodePen console.

Is it possible to remove that extra re-render as well?

Magnus
  • 6,791
  • 8
  • 53
  • 84
  • Thanks for the pointer @Tholle . Are you sure it is the same reason? In my case, there are two scenarios that causes extra renders. Even without any timeouts or such. – Magnus Mar 12 '19 at 22:13
  • Yes, it's the same issue. It boils down to that state being set to the same value re-renders seemingly one more time than you would expect when using hooks for the time being. This will most likely not be the case when concurrent mode is enabled by default in the future. – Tholle Mar 12 '19 at 22:18

0 Answers0