React re-render simple component twice using hooks UseState and UseEffect

Asked Aug 05 '20 at 16:11

Active Aug 05 '20 at 17:48

Viewed 52 times

My goal is to change the state variable when another state variable had changed.

I'm changing state inside UseEffect, which depends on a changed input text. And it runs render twice.

Just type something in input and check the console.

UPD: I'm already comment out <React.StrictMode> in index.js

edited Aug 05 '20 at 17:48

asked Aug 05 '20 at 16:11

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) – Drew Reese Aug 05 '20 at 16:14
1

Yes, because you are updating state twice, once in the onChange event handler and once in the useEffect method. Every state change results in a re-render. That is expected behaviour. – Vincent Ramdhanie Aug 05 '20 at 16:17
Don't console log in the functional component body, and definitely don't console log in the returned JSX, that is a side-effect in what *should* be a pure function. Use an effect to log state. Your component isn't *actually* rendering to the DOM twice. Learn the [component lifecycle](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) and you'll see why. – Drew Reese Aug 05 '20 at 16:28

0 Answers0