# Pairing A Callback With A useState Hook

React's Class-based state management allowed you to update the state of your component with a call to `this.setState()`. The first argument represents the changes to the state. It also accepts a second argument; a callback that will be invoked after the state has been updated.

```javascript
this.setState({ loading: true }, () => console.log("Loading..."));
```

If you've transitioned to Hooks-based state management, then you may have noticed that the updaters generated by `useState` calls do not accept a second callback argument.

If you want to update state and fire a callback in response to it, you can pair `useState` with `useEffect`.

```javascript
import React, { useState, useEffect } from "react";

function App() {
  const [loading, setLoading] = useState(false);
  const toggleLoading = () => setLoading(prevLoading => !prevLoading);
  useEffect(() => {
    if(loading) {
      console.log("We are loading now");
    }
  }, [loading])

  return (
    <div>
      {loading && <p>Loading...</p>}
      <button onClick={toggleLoading}>{loading ? "Cancel" : "Save"}</button>
    </div>
  );
}
```

The `useState` acts on its own. It has no side-effects. We follow it with a `useEffect` that responds to changes to the value of `loading` -- this is where our *callback* gets invoked.

See a [live example](https://codesandbox.io/s/clever-roentgen-kvzze).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ploegert.gitbook.io/til/programmy/react/pairing-a-callback-with-a-usestate-hook.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.