diff --git a/snippets/useComponentDidMount.md b/snippets/useComponentDidMount.md new file mode 100644 index 000000000..75d9996d4 --- /dev/null +++ b/snippets/useComponentDidMount.md @@ -0,0 +1,26 @@ +--- +title: useComponentDidMount +tags: hooks,effect,beginner +--- + +A hook that executes a callback immediately after a component is mounted. + +- Use `React.useEffect()` with an empty array as the second argument to execute the provided callback only once when the component is mounted. + +```jsx +const useComponentDidMount = onMountHandler => { + React.useEffect(() => { + onMountHandler() + }, []); +} +``` + +```jsx +const Mounter = () => { + useComponentDidMount(() => console.log('Component did mount')); + + return
Check the console!
; +} + +ReactDOM.render(, document.getElementById('root')); +```