I have some react component, that looks like this:
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
It seem to basicly work well. However, several videos and articles we found, insisted that this will result in a loop of re-renders. They recommend we do something like this:
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
const incCounter = () => setCount(count + 1);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={incCounter}>
Click me
</button>
</div>
);
}
While on this example it's not that bad, longer forms create such a long list of functions that make the code ugly. As everything works well, should I fear the first part will result in useless renders? If not, can you explain what other reasons we have to move the functionality into a function inside the same object, when all it does it update a state?
