0

Why does just defining the state like this:

const [flipCardDeg, changeFCDeg] = useState(0);

in a normal function component cause an additional re-render cycle? Instead of 1 re-render, it re-renders twice.

I know that if somewhere is used "changeFCDeg" to change the state it should re-render, that's OK. But why at the beginning, when initializing everything, it re-renders one more time?

Should I worry about having 2 re-renders instead of one, and if yes, how to deal with it?

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
thewebmasterp
  • 115
  • 1
  • 6
  • 1
    Does this answer your question? [Why does useState cause the component to render twice on each update?](https://stackoverflow.com/questions/61578158/why-does-usestate-cause-the-component-to-render-twice-on-each-update) – jonrsharpe Jun 06 '20 at 15:30

1 Answers1

1

React re-renders whenever it detects change. You can try to get control over that by specifying exactly what it perceives as a change. For example, like this:

const getMoreData = false
const [flipCardDeg, changeFCDeg] = useState(0);
useEffect(() => {
  console.log('say something once')
  return () => {
    console.log('why say it again?')
  }
}, [getMoreData])  // will only run once unless getMoreData is changed
jcklopp
  • 451
  • 5
  • 9