Skip to main content
Version: Version 3.3 - Segmentation Support 🚧

Extensions: Lifecycle Hooks


Extensions can implement specific lifecycle methods.

  • preRegistration
  • onModeEnter
  • onModeExit


If an extension defines the preRegistration lifecycle hook, it is called before any modules are registered in the ExtensionManager. This hook is an async function that can be used to perform:

  • initialize 3rd party libraries
  • register event listeners
  • add or call services
  • add or call commands

The preRegistration hook receives an object containing the ExtensionManager's associated ServicesManager, CommandsManager, and any configuration that was provided with the extension at time of registration.

Example preRegistration implementation that register a new service and make it available in the app. We will talk more in details for creating a new service for OHIF-v3.

// new service inside new extension
import MyNewService from './MyNewService';

export default function MyNewServiceWithServices(serviceManager) {
return {
name: 'MyNewService',
create: ({ configuration = {} }) => {
return new MyNewService(serviceManager);


import MyNewService from './MyNewService'

export default {

* @param {object} params
* @param {object} params.configuration
* @param {ServicesManager} params.servicesManager
* @param {CommandsManager} params.commandsManager
* @returns void
async preRegistration({ servicesManager, commandsManager, configuration }) {
console.log('Wiring up important stuff.');

window.importantStuff = () => {

console.log('Important stuff has been wired.');

// Registering new services


If an extension defines the onModeEnter lifecycle hook, it is called when a new mode is enters, or a mode's data or datasource is switched.

For instance, in DICOM structured report extension (dicom-sr), we are using onModeEnter to re-create the displaySets after a new mode is entered.

Example onModeEnter hook implementation

export default {
id: '@ohif/extension-cornerstone-dicom-sr',

onModeEnter({ servicesManager }) {
const { DisplaySetService } =;
const displaySetCache = DisplaySetService.getDisplaySetCache();

const srDisplaySets = displaySetCache.filter(
ds => ds.SOPClassHandlerId === SOPClassHandlerId

srDisplaySets.forEach(ds => {
// New mode route, allow SRs to be hydrated again
ds.isHydrated = false;


If an extension defines the onModeExit lifecycle hook, it is called when navigating away from a mode. This hook can be used to clean up data tasks such as unregistering services, removing annotations that do not need to be persisted.

Example onModeExit hook implementation

export default {
id: 'myExampleExtension',

onModeExit({ servicesManager, commandsManager }) {