Monitor why a React component was called

counter.tsx

import React, { useEffect, useRef, useState } from 'react';

export const Counter: React.FC = () => {
	const [count, setCount] = useState(0);

	const previousValueRef = useRef(count);
	const isMountRef = useRef(true);

	console.log('Counter called');
	console.log(`Previous value = ${previousValueRef.current}`);
	console.log(`Current value = ${count}`);

	if (isMountRef.current) {
		console.log('Counter called because of mount');
	} else if (count === previousValueRef.current) {
		console.log('Counter called because its parent updated state');
	} else {
		console.log('Counter rendered because it updated state');
	}

	useEffect(() => {
		console.log('Counter mounted');
		isMountRef.current = false;
		return () => {
			console.log('Counter unmounted');
		};
	}, []);

	useEffect(() => {
		previousValueRef.current = count;
	}, [count]);

	const increment = () => {
		setCount(count + 1);
	};

	const decrement = () => {
		setCount(count - 1);
	};

	return (
		<div>
			<h1>Counter</h1>
			<p>Count: {count}</p>
			<button onClick={increment}>Increment</button>
			<button onClick={decrement}>Decrement</button>
		</div>
	);
};

export default Counter;