A New Hooks System for Dash

Along with the usual bug fixes and minor updates, the latest release of Dash includes one big new feature that will make life a lot easier for component developers. That feature is a hooks system: a way for you to tell Dash to run functions at certain points in a dashboard’s lifecycle.

What are hooks in data app development?

Hooks allow developers to set up Flask extensions, run extra actions with callbacks, handle errors the way you want, and build sophisticated functionality into component libraries, which eliminates the need to dig into Dash’s source code.

Dash developers can start building apps using hooks today using the Dash 3.0 release candidate along with our latest documentation covering how to build hooks into Dash apps: We have a treasure trove of examples, explainers, and use cases for folks to dig into.

Types of hooks supported by Dash

Dash 3.0 supports six kinds of hooks, which are distinguished by when they’re called and what they’re allowed to do:

Setup hooks are called when the application is being initialized. You can use them to set up Flask extensions, get a reference to the app, add Flask blueprint/static routes, and so on.
Layout hooks are called before Dash serves components, and can be used to insert new components into the layout. For example, you can define a hook that automatically adds a watermark to a dashboard.
Routing hooks add new routes to the Flask app, i.e., they tell Flask to send requests to a URL (or set of URLs) to a particular handler. These hooks often accompany layout hooks: if the latter adds a new component to the dashboard, the application will usually need a new route to handle requests from that component.
Callback hooks give developers a way to define extra server-side callbacks. Like routing hooks, they are often used when a layout hook adds a new component to a dashboard.
Error hooks run on any callback error, and can be used to do things like sending error messages to an external logging system. Supporting this capability has been on our to-do list for quite some time, and we expect that a lot of people deploying applications in production environments will make use of it.
Finally, index hooks can be used to insert things like Google Analytics into the head of a dashboard’s page.

The hooks described above are all written in Python, and all run in the server. The new release also supports client-side callbacks written in JavaScript — again, if you have a custom component on a page, you may need to customize its in-page behavior. Finally, Dash 3.0 also has new functions called script and stylesheet that let you load custom JavaScript and CSS files in the page. These functions are typically used to get the libraries and styling needed by custom components.

An example to illustrate hooks in Dash

So what does this look like in practice? One simple example is a layout hook that adds a div containing a few words on top of the regular layout:

@hooks.layout(priority=2)
def update_layout(layout):
    return [html.Div("New layout content")] + layout

A slightly more complex example adds a new Flask route for fetching data:

@hooks.route(methods=("GET",), name="get-data", priority=1)
def new_route():
    data = {
        "status": "success"
    }
    return jsonify(data)

We hope these new features will make it easier for you to build the dashboards you want. As always, we would be very grateful for feedback, including bug reports and suggestions for making them better. We would also be grateful for examples that we can add to our gallery: if you create any you’d like to share, please get in touch.

To learn more about this update and other exciting innovations coming to Plotly and Dash, watch our recent webinar.