Avatar of Michael Sterling
Michael Sterling
Flag for United States of America asked on

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;

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;

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.
ReactJavaScriptjQuery* ReactJS

Avatar of undefined
Last Comment
Michael Sterling

8/22/2022 - Mon
Michael Sterling

ASKER
After talking with a co-worker I was offered this: This code:

setCount({count: count + 1});

Open in new window


converts the parameter in the setCount function into an object and there for the function doesn't know what to do with it and that's why it blows up.

This code:
setCount( () => count + 1 );

Open in new window

and or this code:
setCount(count + 1 );

Open in new window

achieves the desired result because in both cases, its taking the current value of the count state variable and just incrementing it. Can anyone add any more depth/info to this explanation? I do understand, but I'm just looking of other ways of understanding it.
ASKER CERTIFIED SOLUTION
Chris Stanyon

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Michael Sterling

ASKER
@Chris: Thanks for taking the time to add to this discussion.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck