Skip to Content
UI KitHooksuseMount

Overview

The useMount hook is designed to simplify the process of running a function when a React component mounts. This hook provides a clean and concise alternative to the useEffect hook for handling component mount logic.

Incorporating useMount into your React components streamlines the process of executing code upon component mount, simplifying lifecycle management in functional components.

Key Features

  • Simplicity: Offers a straightforward way to execute code on component mount.
  • Lifecycle Management: Helps manage React component lifecycle in a functional component.
  • Reduced Boilerplate: Eliminates the need for an empty dependency array in useEffect.

How It Works

The hook takes a function as an argument and runs it once when the component mounts. It uses the useEffect hook internally, with an empty dependency array, to ensure that the function is called only once.

Syntax

useMount(() => {
  // code to run when the component mounts
});

Usage Example

Here’s an example of how to use the useMount hook in a component:

import { useMount } from '@akinon/ui-hooks';
 
const MyComponent = () => {
  useMount(() => {
    console.log('Component has mounted');
  });
 
  return <div>Hello, World!</div>;
};
 
export default MyComponent;
useLocalStorageusePrevious