useMounted React hook

Check if your React component has mounted.

1 min read

— views

The hook

Check if your component has mounted. This can be useful if you're using server side rendering.

src/hooks/useMounted.ts
import * as React from "react";
 
export function useMounted() {
  const [isMounted, setMounted] = React.useState(false);
 
  React.useEffect(() => {
    setMounted(true);
 
    return () => {
      setMounted(false);
    };
  }, []);
 
  return isMounted;
}
tsx

npm/yarn

You can now also use this hook via npm/yarn by installing my npm package:

npm install @casperiv/useful
bash

Later in your project

import { useMounted } from "@casperiv/useful/hooks/useMounted";
tsx