https://github.com/unixzii/use-mount-effect

A hook triggered only once on mount.
https://github.com/unixzii/use-mount-effect

hooks javascript library react react-hooks

Last synced: 14 days ago
JSON representation

A hook triggered only once on mount.

• Host: GitHub
• URL: https://github.com/unixzii/use-mount-effect
• Owner: unixzii
• License: mit
• Created: 2024-01-09T05:02:09.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-01-10T02:27:27.000Z (10 months ago)
• Last Synced: 2024-10-25T02:28:52.291Z (19 days ago)
• Topics: hooks, javascript, library, react, react-hooks
• Language: JavaScript
• Homepage:
• Size: 72.3 KB
• Stars: 20
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# `useMountEffect`

[![npm version](https://badge.fury.io/js/use-mount-effect.svg)](https://badge.fury.io/js/use-mount-effect)

A React hook triggered only once on mount.

## Background

> Why does my effect run twice when the component mounts?? It's f\*\*king annoying!

Well. That is not a bug in React, actually it's by design according to the [doc](https://react.dev/reference/react/useEffect#my-effect-runs-twice-when-the-component-mounts):

> When Strict Mode is on, in development, React runs setup and cleanup one extra time before the actual setup.

There are some workarounds to solve this problem, but people still feel it's a hassle. That's why I made this.

## Install

```

npm install --save use-mount-effect

```

## Usage

Basic usage:

```js

import { useMountEffect } from "use-mount-effect";

const MyComponent = () => {

  useMountEffect(() => {

    // Do something only when the component mounts.

  });

  return 
Blah blah blah
;

};

```


With cleanup:

```js

import { useMountEffect } from "use-mount-effect";

const MyComponent = () => {

  useMountEffect(() => {

    // Do something only when the component mounts.

    return () => {

      // Do something only when the component unmounts.

    };

  });

  return 
Blah blah blah
;

};

```


## FAQ

### Should I use this hook in production mode?

Actually, you don't need to use this hook in production mode, because it behaves just like `useEffect`. You should really fix your effects if you find your app works incorrectly due to the strict mode, because it implies some logic errors or resource leakage.

**Always use this hook with caution.**

### What's the difference between it and `useEffect`?

The cleanup callback is delayed until the next event loop when you use `useMountEffect`, even in production mode. Be sure to verify that it doesn't affect your code.

### Do I really need this?

Just one more reminder. `useEffect` doesn't run twice in production mode. And if there is no user-visible behavior difference between running it once and running it twice, you don't need `useMountEffect`. To learn more, check out [this](https://react.dev/learn/synchronizing-with-effects#sending-analytics).

## License

MIT