React - Write a Simple Counter

This drill requires the user to write methods that manage a counter: increment(), decrement() and reset().

Why do the blocks that contain the count value changing functionality need to be contained in parentheses?

And why can the first count be called normally, but the second one needs to be written as state.count? My best guess is that anytime that a state value is used in setState, they need to be clearly written to indicate if the value is from its current or previous state.

increment() {
    this.setState(state => ({
      count: state.count + 1
    }))
  }

  decrement() {
    this.setState(state => ({
      count: state.count - 1
    }))
  }

  reset() {
    this.setState(state => ({
      count: 0
    }))
  }

To address anything here is little different than javascript but it looks like that each one is using a call back function with a object as its argument. Was this part of a challenge posting the link to it might help others to relate/answer your question.

The updater function callback is an arrow function with an implicit object return. So you have to wrap the object in parentheses (MDN).

count is the property on the this.state object.

this.state = {
  count: 0
}

We set the state by returning an object that is shallowly merged into this.state. So its shape must match, if you want to update count the object you return must have that property.

{ propToUpdate: value }

A super simplified version, to be clear, this is not how it works.

let state = {
  count: 0,
};

function updateState(callback) {
  const newState = { ...state, ...callback(state) };
  state = newState;
}

updateState((state) => ({ count: state.count + 1 }));
console.log(state); // { count: 1 }

updateState((state) => ({ count: state.count + 1 }));
console.log(state); // { count: 2 }

updateState((state) => ({ countTimesTwo: state.count * 2 }));
console.log(state); // { count: 2, countTimesTwo: 4 }

Forgot to post the link of the challenge