https://github.com/iam-frankqiu/react-use-watch

:tada: A React hook about triggers once only when dependencies have changed.
https://github.com/iam-frankqiu/react-use-watch

callback dependency hooks react react-hooks reactjs typescript utilities watch

Last synced: 4 months ago
JSON representation

:tada: A React hook about triggers once only when dependencies have changed.

• Host: GitHub
• URL: https://github.com/iam-frankqiu/react-use-watch
• Owner: iam-frankqiu
• License: mit
• Created: 2021-02-19T13:31:18.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-08-19T08:48:05.000Z (over 3 years ago)
• Last Synced: 2024-05-02T04:17:42.327Z (10 months ago)
• Topics: callback, dependency, hooks, react, react-hooks, reactjs, typescript, utilities, watch
• Language: TypeScript
• Homepage:
• Size: 214 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `react-use-watch`
• awesome-react-hooks-cn - `react-use-watch`
• awesome-react-hooks - `react-use-watch`
• awesome-react-hooks - `react-use-watch`

README

        
# react-use-watch

![coverage](https://img.shields.io/badge/coverage-100%25-brightgreen)

![dependency](https://img.shields.io/badge/dependency-zero-brightgreen)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-use-watch)

![typescript supported](https://img.shields.io/badge/typescript-supported-brightgreen)

![npm](https://img.shields.io/npm/v/react-use-watch)

A React hook about triggers once only when dependencies have changed.

## Philosophy

```javascript

useEffect(() => {

  document.title = `You clicked ${count} times`;

}, [count]); // Only re-run the effect if count changes

```

Just like above. The react hooks of [useEffect](https://reactjs.org/docs/hooks-effect.html) will run the effect at least once despite if the count changes or not. It will trigger another time if the count has changed. That's not what we want. What I really want is that only run the effect if the count changes. That's the philosophy of `react-use-watch`.

## Installation

Install  with npm

```bash

  npm install react-use-watch

```

Or with yarn

```bash

  yarn add react-use-watch

```

## Usage

```javascript

import {useWatch} from "react-use-watch";

function App() {

  useWatch(() => {

    document.title = `You clicked ${count} times`;

  }, [count]) // Only run the effect if count changes

  return ()

}

```

## License

[MIT](./LICENSE)