Advanced React Patterns With Hooks/

...

/

Handling State Change Callbacks

Handling State Change Callbacks

In this lesson, we'll learn how to use React hooks to handle state change callbacks.

We'll cover the following...

Triggering Callbacks Upon State Change

Let’s borrow a concept from your experience with React’s class components. If you remember, it’s possible to do this with class components:

Press + to interact
this.setState({
  name: "value"
}, () => {
  this.props.onStateChange(this.state.name)
})

If you don’t have experience with class components, this is how you trigger a callback after a state change in class components.

Usually, the callback, e.g., this.props.onStateChange on line 4, is always invoked with the current value of the updated state as shown below:

Press + to interact
this.props.onStateChange(this.state.name)

Why is this important? This is good practice for ...