awmleer/use-action

Almost same to useEffect, but not deferred.

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.

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

Example

useEffect

function Foo(props) {
  ref = useRef(null)
  useEffect(() => {
    ref.current = 'initialized'
  }, [])
  console.log(ref.current) // -> null
  return null
}

useAction

function Foo(props) {
  ref = useRef(null)
  useAction(() => {
    ref.current = 'initialized'
  }, [])
  console.log(ref.current) // -> initialized
  return null
}