next-app-template/src/hooks/useHasMounted.ts

21 lines
632 B
TypeScript

import * as React from "react"
/**
* useHasMounted is a React hook that checks if the component has mounted in the DOM.
* This is useful for preventing server-side code from running on the client-side.
*
* @link https://www.joshwcomeau.com/snippets/react-hooks/use-has-mounted/
*
* @returns {boolean} hasMounted - A boolean value that is initially false and changes to true once the component mounts.
*/
const useHasMounted = (): boolean => {
const [hasMounted, setHasMounted] = React.useState<boolean>(false)
React.useEffect(() => {
setHasMounted(true)
}, [])
return hasMounted
}
export default useHasMounted