Chaining Callbacks

Chained callbacks

As the name suggests, a chained callback is a technique used to bind/link/chain callback functions together, in which we use the output of a particular callback function as the input to a successive callback function. Perhaps the best example of a chained callback could be in the implementation of a conditional dropdown menu.

In a conditional dropdown for an online store, we might want the user to be able to select either Sunglasses, T-shirts or Hats. Suppose they choose Sunglasses: From this point onward, we’d like to only show different sunglasses sub-categories (e.g., “Ray Ban Sunglasses,” “Oakley Sunglasses,” etc.). It would be a nuisance to the user to still show every sub-category for T-shirts and Hats as they never asked for those categories.

A simple example

Here’s a simple example of how to chain callbacks in Dash:

1. Setup and layout: Import the necessary libraries, initialize the Dash app, and create the layout that includes two dropdown Dash Components and a display component.

Let’s look at the code in depth:

• Lines 1–4: Import necessary libraries: Dash, Dash Core Components (dcc), Dash HTML Components (html), and input and output dependencies.

• Line 7: Create a Dash app instance.

• Lines 10–24: Define the app layout containing three components:

  • Lines 11–18: A dcc.Dropdown component with id='category-dropdown' that allows users to select a category from a list of options (sunglasses, t-shirts, hats). The default value is set to sunglasses.
  • Line 19: A dcc.Dropdown component with

...