Skip to content

awmleer/use-action

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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
}