Let say we have this component, and we want to update the **`count` in Button 1** and the **`count` in Button 2** variable individually based on its previous value when clicking each button. Currently, both are updating when clicking either button.
Is there an efficient way to do this without isolating it in a new component?

```

function Foo() {

    const [count, setCount] = useState(0);

    function incrementCount(){
        setCount(count + 1)
    }
    return(
        <div>
            // Button 1
            <div>
                <p>count: {count}</p>
                <button onClick={incrementCount}>Click</button>
            </div>

            // Button 2
            <div>
                <p>count: {count}</p>
                <button onClick={incrementCount}>Click</button>
            </div>

        </div>
    )
}
export default Foo;

```

I do not want to do this:

```

function Foo() {

    const [count, setCount] = useState(0);

    function incrementCount(){
        setCount(count + 1)
    }
    return(
        <div>

            <div>
                <p>count: {count}</p>
                <button onClick={incrementCount}>Click</button>
            </div>

        </div>
    )
}
export default Foo;

```

Then calling 2 `Foo` components like this:

```
function AnotherComponent() {
    <Foo\>
    <Foo\>
}
export default AnotherComponent;

```