diff --git a/snippets/useComponentDidMount.md b/snippets/useComponentDidMount.md index 22a649c43..1b946787c 100644 --- a/snippets/useComponentDidMount.md +++ b/snippets/useComponentDidMount.md @@ -7,7 +7,7 @@ lastUpdated: 2021-10-13T19:29:39+02:00 Executes a callback immediately after a component is mounted. -- Use `useEffect()` with an empty array as the second argument. This will execute the provided callback only once when the component is mounted. +- Use the `useEffect()` hook with an empty array as the second argument. This will execute the provided callback only once when the component is mounted. - Behaves like the `componentDidMount()` lifecycle method of class components. ```jsx diff --git a/snippets/useComponentDidUpdate.md b/snippets/useComponentDidUpdate.md new file mode 100644 index 000000000..162d1b503 --- /dev/null +++ b/snippets/useComponentDidUpdate.md @@ -0,0 +1,48 @@ +--- +title: useComponentDidUpdate +tags: hooks,effect,beginner +firstSeen: 2021-11-09T05:00:00-04:00 +--- + +Executes a callback immediately after a component is updated. + +- Use the `useRef()` hook to create a variable, `mounted`, that tracks if the component has been mounted. +- Use the `useEffect()` hook to set the value of `mounted` to `true` the first time the hook is executed. +- Run the provided `callback` on subsequent hook executions. +- Providing a dependency array for the second argument, `condition`, will only execute the hook if any of the dependencies change. +- Behaves like the `componentDidUpdate()` lifecycle method of class components. + +```jsx +const useComponentDidUpdate = (callback, condition) => { + const mounted = React.useRef(false); + React.useEffect(() => { + if (mounted.current) callback(); + else mounted.current = true; + }, condition); +}; +``` + +```jsx +const App = () => { + const [value, setValue] = React.useState(0); + const [otherValue, setOtherValue] = React.useState(1); + + useComponentDidUpdate(() => { + console.log(`Current value is ${value}.`); + }, [value]); + + return ( + <> +
+ Value: {value}, other value: {otherValue} +
+ + + > + ); +}; + +ReactDOM.render(