How to prevent double rerender when I use props, useState and useEffect? - reactjs

Question

For example I have this component
const FooBar = (props) => {
console.log("render")
const [foo, setFoo] = useState(props.foo)
useEffect(() => {
setFoo(props.foo)
}, [props.foo])
return (
<div>
{foo} <button onClick={() => setFoo(x => x + 1)}>component plus</button>
</div>
);
}
And I can change it props like this
const App = () => {
const [foo, setFoo] = useState(1)
return (
<div>
<FooBar foo={foo} />
<button onClick={() => setFoo(x => x + 1)}>parent plus</button>
</div>
);
}
When I click on parent plus button the FooBar component will rerender two times. the first one is from props change and the second one is from setFoo inside useEffect.
How can I prevent second rerender?

Answer 1

I am not exactly sure what your goal with this example would be.
If you want to have two buttons that increment the same counter, than your code currently does not work as intended.
If you click the 'component plus' button several times and afterwards click the 'parent plus' button, your counter will reset to the value when you last clicked the parent button.
In case you want to pass state to child components, you usually do not want to save the passed state as the child components state. That will make it unnecessarily harder to sync up both states.
What you would do, is to pass the state and a function to set that state to the child component.
Your example would then look like this:
const App = () => {
const [foo, setFoo] = React.useState(1);
return (
<div>
<FooBar foo={foo} setFoo={setFoo} />
<button onClick={() => setFoo(x => x + 1)}>parent plus</button>
</div>
);
};
const FooBar = props => {
console.log("render");
return (
<div>
{props.foo} <button onClick={() => props.setFoo(x => x + 1)}>component plus</button>
</div>
);
};