[maxloh]

They had them from day one.

Class component:

  class Counter extends Component {
    state = { age: 42 };

    handleAgeChange = () => {
      this.setState({ age: this.state.age + 1 });
    };

    render() {
      return (
        <>
          <button onClick={this.handleAgeChange}>Increment age</button>
          <p>You are {this.state.age}.</p>
        </>
      );
    }
  }

Functional component:

  function Counter() {
    const [age, setAge] = useState(42);

    const handleAgeChange = () => setAge(age + 1);

    return (
      <>
        <button onClick={handleAgeChange}>Increment age</button>
        <p>You are {age}.</p>
      </>
    );
  }

[ascagnel_]

You can actually further simplify the functional component by using setState's callback form. You don't always need to do this, but it makes setting state from within a useEffect much safer in that it won't need the current state value in its dependency array.

  const handleAgeChange = setAge((prevAge) => prevAge + 1);

[Izkata]

That's wrong, it's calling setAge immediately and not making a callback. You'll get an infinite render loop from that. It should be:

  const handleAgeChange = () => setAge((prevAge) => prevAge + 1);

https://react.dev/reference/react/useState#updating-state-ba...

The callback version is really only needed if there's a risk of setAge being called multiple times between renders and you do actually want all the mutations, vs only wanting it based on what's currently rendered.

[ascagnel_]

Ah this is what I get for trying to write code on my phone. I'm specifically thinking of cases within useEffects, where the state setter is constant between renders but the state itself is not, so you can wind up with an infinite re-render once the state has changed once, unless you check the state inside the useEffect before calling setState.