From 36a96404079fe52be19a049d037b7fbcd07c7810 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Fri, 3 Jan 2020 15:56:54 +0200 Subject: [PATCH] Add useComponentDidMount --- snippets/useComponentDidMount.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 snippets/useComponentDidMount.md 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')); +```