Coordinating lifecycle functions across components

As we reuse the same function across components, we can keep track globally of the components that use the same lifecycle function.

Let me show you an example. Here, I would like to keep track of how many components on the screen are using our lifecycle function.

To count the number of components, we can define a module-level variable and update it within our lifecycle function:

import { onMount, onDestroy } from 'svelte';
import { writable } from 'svelte/store';
let counter = writable(0);
export function setupGlobalCounter() {
  onMount(() => counter.update($counter => $counter + 1));
  onDestroy(() => counter.update($counter => $counter - 1));
  return counter;
}

As the counter variable is declared outside the setupGlobalCounter function, the same counter variable instance is used and shared across all the components.

When any component is mounted, it will increment the counter, and any component that is referring to the counter will get updated with the latest counter value.

This pattern is extremely useful when you want to set up a shared communication channel between components and tear it down in onDestroy when the component is being destroyed.

Let’s try to use this technique in our next exercise.

Exercise 2 – Scroll blocker

Usually, when you add a pop-up component onto the screen, you want the document to not be scrollable so that the user focuses on the popup and only scrolls within the popup.

This can be done by setting the overflow CSS property of the body to "hidden".

Write a reusable function used by pop-up components that disables scrolling when the pop-up component is mounted. Restore the initial overflow property value when the pop-up component is destroyed.

Do note that it is possible to have more than one pop-up component mounted on the screen at once, so you should only restore the overflow property value when all the popups are destroyed.

You can check the answer at https://github.com/PacktPublishing/Real-World-Svelte/tree/main/Chapter01/02-scroll-blocker.