What is the mutation observer?

MutationObserver is a JavaScript API that allows developers to listen for changes to specific elements or nodes in the DOM (Document Object Model). It provides a way to observe and respond to changes that occur within the DOM structure.

The MutationObserver works by registering a callback function to observe a specific target element or node in the DOM. When a change occurs, such as a node being added or removed, the callback function is called with a list of MutationRecord objects that describe the changes that have occurred.

The MutationObserver API provides a powerful tool for building responsive web applications that need to react to changes in the DOM. It can be used to implement a wide range of features, such as lazy-loading content, auto-updating UI elements, and real-time data synchronization.

Let me explainmutation observer through an example.

Our aim is to add an animation when the category's section height changes. We need to listen that operation

before	after

In order to do this we need a reference of the category section.

importReact,{useRef}from'react';import{CategoryItems}from'./category-items/category-items';import{CategoryTitles}from'./category-titles/category-titles';import'./categories.scss';constCategories=()=>{constcategoriesRef=useRef<HTMLDivElement>(null);return(<divclassName="categories"ref={categoriesRef}><CategoryTitles/><CategoryItems/></div>);};export{Categories};

After preparing thecategoriesRef, we can create themutationObserver structure.

First of all, we need to create mutationObserver

constmutationObserver=newMutationObserver(async()=>{console.log('mutationObserver operation');});

This is our mutationObserver instance we will call this instance fromuseEffect

useEffect(()=>{if(categoriesRef.current){mutationObserver.observe(categoriesRef.current,{childList:true,subtree:true,});return()=>{mutationObserver.disconnect();};}},[]);

• We definedmutationObserver.observe withcategoriesRef.current which listens to theparameters such aschildList andsubtree, also you can checkthis out for more parameters.

• And also we define themutationObserver.disconnect() oncomponentWillUnmount hook for delete listen operation when component closed.

Henceforward when the height change atcategoriesRef we will see the console log.

console.log('mutationObserver operation');

Then we will add the animation handler code piece and define a CSS transition tocategoriesRef

constmutationObserver=newMutationObserver(async()=>{constcategoryTitles=document.getElementById('categoryTitles')asHTMLDivElement|null;constcategoryItems=document.getElementById('categoryItems')asHTMLDivElement|null;if(categoriesRef.current&&categoryTitles&&categoryItems){if(categoryTitles.clientHeight>categoryItems.clientHeight){categoriesRef.current.style.height=`${categoryTitles.clientHeight}px`;}else{categoriesRef.current.style.height=`${categoryItems.clientHeight}px`;}}});

.categories{transition:height200msease;}

voilà 🎉

Source

• https://javascript.info/mutation-observer
• https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver