Do we still need functional setState way in react hooks?

Question

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

  const handleClick = () =>
    setCount(prevCount => {
      return prevCount + 1;
    });

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

  const handleClick = () => setCount(count + 1);

Coming from class-based component background, it becoming a habit where we use functional setState. I'm wondering if do we still need to rely on prevState in functional hooks? Or the current state is always "trustable" and most "updated"?

Yes, we do. No, current state isn't trustable, less than ever before. See for example, https://stackoverflow.com/questions/53845595/wrong-react-hooks-behaviour-with-event-listener — Estus Flask, Apr 04 '19 at 07:54

score 23 · Accepted Answer · answered Apr 04 '19 at 08:00

23

Yes, the behavior is similar.

React is batching the updates calls. When Writing:

const handleClick = () => setCount(count + 1)
handleClick()
handleClick()
handleClick()

the count in state will be 1

When Writing:

const handleClick = () =>
  setCount(prevCount => {
    return prevCount + 1;
});
handleClick()
handleClick()
handleClick()

the count in state will be 3

answered Apr 04 '19 at 08:00

Edan Chetrit

4,713
2
20
20

Thanks, this example makes it very clear how this works. This explains why a toggle function in my component isn't working correctly when trying to logically NOT a boolean value stored in state. – stuckj Jan 23 '20 at 20:37

Estus Flask · Answer 2 · 2019-04-04T08:37:27.993

State updater function is necessary in both class and functional components. this.setState shouldn't be used together with this.state, the same applies to useState state and state setter. There are more cases for useState when not using state updater will result in wrong behaviour.

In class components, the only problem with the use of this.state is race condition due to asynchronous state updates:

componentDidMount() {
  this.setState({ count: this.state.count + 1 });
  this.setState({ count: this.state.count + 1 }); // overwrites with stale count
  console.log(this.state.count); // not updated
}

When there are no race conditions, this.state can be accessed anywhere inside a component because this reference stays the same:

componentDidMount() {
  this.setState({ count: this.state.count + 1 });

  setTimeout(() => {
    this.setState({ count: this.state.count + 1 });
  }, 100)

  setTimeout(() => {
    console.log(this.state.count);
  }, 200)
}

In functional components, the problem with the use of useState state is function scope. There's no object like this that could be accessed by reference, a state is accessed by value which won't be updated until a component is re-rendered:

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

useEffect(() => {
  // runs once on mount
  // count is always 0 in this function scope

  setCount({ count: count + 1 });

  setTimeout(() => {
    setCount({ count: count + 1 }); // overwrites with stale count
  }, 100)

  setTimeout(() => {
    console.log(count); // not updated
  }, 200)
}, []);

Do we still need functional setState way in react hooks?

2 Answers2

Linked

Related