Can I have a simplified explanation of how useState works?

I'm [new to / learning] react and so I'm experimenting with code samples that I find and trying to understand concepts within the language. Why does this work when the button is clicked:

import React, { useState } from 'react';


const Home = props => {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  const manipulateSomeState = () => {
        setCount(() => (count + 1));
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={manipulateSomeState}>
        Click me
      </button>
    </div>
    );
}

export default Home;

Select all Open in new window

But this does not work when the button is clicked:

import React, { useState } from 'react';


const Home = props => {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  const manipulateSomeState = () => {
        setCount({count: count + 1});
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={manipulateSomeState}>
        Click me
      </button>
    </div>
    );
}

export default Home;

Select all Open in new window

If I can get an explanation in "laymen" (non technical) terms that would be great.  Everything is the same except the "manipulateSomeState" function within the functional component. For what its worth, when I look at the first version of the manipulateSomeState function (the one that breaks/doesn't work) it seems straight forward. In my mind I'm adding 1 to the count state variable. In the second version of manipulateSomeState (the version that works), it seems like I'm having to use an anonymous function to accomplish the same thing and it appears to me that this is more/overly complicated. What am I not understanding.



Thanks in advance.