The useOnMount Hook

The useOnMount Hook has a similar effect to the componentDidMount life cycle. It is used as follows:

import React from 'react'
import { useOnMount } from 'react-hookedup'

export default function UseOnMount () {
useOnMount(() => console.log('mounted'))

return <div>look at the console :)</div>
}

The preceding code will output mounted to the console when the component gets mounted (when the React component is rendered for the first time). It will not be called again when the component re-renders due to, for example, a prop change.

Alternatively, we could just use a useEffect Hook with an empty array as the second argument, which will have the same effect:

import React, { useEffect } from 'react'

export default function OnMountWithEffect () {
useEffect(() => console.log('mounted with effect'), [])

return <div>look at the console :)</div>
}

As we can see, using an Effect Hook with an empty array as the second argument results in the same behavior as the useOnMount Hook or the componentDidMount life cycle method.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.115.195