https://github.com/awmleer/use-action

Almost same to useEffect, but not deferred.
https://github.com/awmleer/use-action

action effect hook react

Last synced: 11 days ago
JSON representation

Almost same to useEffect, but not deferred.

• Host: GitHub
• URL: https://github.com/awmleer/use-action
• Owner: awmleer
• License: mit
• Created: 2019-06-17T06:55:45.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-03T13:59:21.000Z (almost 2 years ago)
• Last Synced: 2024-04-25T13:02:30.744Z (7 months ago)
• Topics: action, effect, hook, react
• Language: TypeScript
• Size: 395 KB
• Stars: 15
• Watchers: 1
• Forks: 1
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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

README

        
# useAction

Almost same to useEffect, but not deferred.

## Why `useAction`?

> Unlike componentDidMount and componentDidUpdate, the function passed to useEffect fires after layout and paint, during a deferred event. This makes it suitable for the many common side effects, like setting up subscriptions and event handlers, because most types of work shouldn’t block the browser from updating the screen.

From [React docs](https://reactjs.org/docs/hooks-reference.html#timing-of-effects).

But `useAction` can execute the action function immediately after `useAction` get called.

## Example

### useEffect

```jsx

function Foo(props) {

  ref = useRef(null)

  useEffect(() => {

    ref.current = 'initialized'

  }, [])

  console.log(ref.current) // -> null

  return null

}

```

### useAction

```jsx

function Foo(props) {

  ref = useRef(null)

  useAction(() => {

    ref.current = 'initialized'

  }, [])

  console.log(ref.current) // -> initialized

  return null

}

```