https://github.com/banyudu/use-outdated-effect

useEffect with an `outdated` and `mounted` functions and parameters
https://github.com/banyudu/use-outdated-effect

Last synced: 4 months ago
JSON representation

useEffect with an `outdated` and `mounted` functions and parameters

• Host: GitHub
• URL: https://github.com/banyudu/use-outdated-effect
• Owner: banyudu
• License: mit
• Created: 2021-07-13T12:51:12.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-08-06T08:27:10.000Z (almost 4 years ago)
• Last Synced: 2024-04-24T07:28:00.769Z (about 1 year ago)
• Language: TypeScript
• Size: 9.77 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-outdated-effect

useEffect with the `outdated` and `unmounted` functions as parameters

With `useOutdatedEffect`, you can check whether the dependency variables changed after async operations, then cancel the proceeding operations as you wish.

## install

```bash

    npm install --save use-outdated-effect

```

## usage

```jsx

import React, { FC, useState } from 'react'

import useOutdatedEffect from 'use-outdated-effect'

import axios from 'axios'

const App = (props) => {

  const { id } = props

  const [dataSource, setDataSource] = useState(null)

  useOutdatedEffect(async (outdated, unmounted) => {

    const { data } = await axios.get(`/api/mydata/${id}`)

    if (outdated()) { // check whether dependencies changed. In this example, it's the id variable

      // id changed, stop the current operations

      return

    }

    if (unmounted()) { // check whether component is unmounted

      // component destroied, stop the current operations

      return

    }

    setDataSource(data)

  }, [id])

}

```