There is a hook that's fairly common called `useIsMounted` that solves this problem (for functional components)...
import { useRef, useEffect } from 'react'; export function useIsMounted() { const isMounted = useRef(false); useEffect(() => { isMounted.current = true; return () => isMounted.current = false; }, []); return isMounted; }
then in your functional component

function Book() { const isMounted = useIsMounted(); ... useEffect(() => { asyncOperation().then(data => { if (isMounted.current) { setState(data); } }) }); ... }
The `useIsMounted` will only let you change the `state` before the component is `unmounted` from the `DOM`.

There is a hook that's fairly common called `useIsMounted` that solves this problem (for functional components)... ``` import { useRef, useEffect } from 'react';
export function useIsMounted() { const isMounted = useRef(false);
useEffect(() => { isMounted.current = true; return () => isMounted.current = false; }, []);
return isMounted; } ``` then in your functional component ``` function Book() { const isMounted = useIsMounted(); ...
useEffect(() => { asyncOperation().then(data => { if (isMounted.current) { setState(data); } }) }); ... } ```