Skip to main content
Version: 5.0.3



A hook that tracks mutations of an element. It returns a callbackRef.


npm install --save rooks

Importing the hook#

import { useMutationObserverRef } from 'rooks';


function Demo() {
const [mutationCount, setMutationCount] = useState(0);
const incrementMutationCount = () => {
return setMutationCount(mutationCount + 1);
const [myRef] = useMutationObserver(myRef, incrementMutationCount);
const [XOffset, setXOffset] = useState(0);
const [YOffset, setYOffset] = useState(300);
return (
width: 300,
background: 'lightblue',
padding: '10px',
position: 'absolute',
left: XOffset,
top: YOffset,
resize: 'both',
overflow: 'auto',
background: 'white',
color: 'blue',
maxWidth: '100%',
Resize this div as you see fit. To demonstrate that it also updates
on child dom nodes resize
<button onClick={() => setXOffset(XOffset - 5)}> Move Left </button>
<button onClick={() => setXOffset(XOffset + 5)}> Move Right </button>
<button onClick={() => setYOffset(YOffset - 5)}> Move Up </button>
<button onClick={() => setYOffset(YOffset + 5)}> Move Down </button>
<div style={{ height: 500 }} onClick={incrementMutationCount}>
<pre>Mutation count {mutationCount}</pre>
render(<Demo />);


ArgumentTypeDescriptionDefault value
callbackfunctionFunction which should be invoked on mutation. It is called with the mutationList and observerundefined
configobjectMutation Observer configuration{attributes: true,,characterData: true,,subtree: true,,childList: true}

Return value#

Returns an array with one element

refReact refRef which should be observed for Mutations

Join Bhargav's discord server#

You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.

Last updated on by imbhargav5