From 786bee6d6f4a6cdd3edbbff588379455825bd327 Mon Sep 17 00:00:00 2001
From: Chalarangelo <chalarangelo@gmail.com>
Date: Fri, 5 Nov 2021 15:46:57 +0200
Subject: [PATCH] Add useComponentDidUpdate

---
 snippets/useComponentDidMount.md    |  2 +-
 snippets/useComponentDidUpdate.md   | 48 +++++++++++++++++++++++++++++
 snippets/useComponentWillUnmount.md |  2 +-
 3 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 snippets/useComponentDidUpdate.md

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 (
+    <>
+      <p>
+        Value: {value}, other value: {otherValue}
+      </p>
+      <button onClick={() => setValue(value + 1)}>Increment value</button>
+      <button onClick={() => setOtherValue(otherValue + 1)}>
+        Increment other value
+      </button>
+    </>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));
+```
diff --git a/snippets/useComponentWillUnmount.md b/snippets/useComponentWillUnmount.md
index fe7dc648d..3b927d6a8 100644
--- a/snippets/useComponentWillUnmount.md
+++ b/snippets/useComponentWillUnmount.md
@@ -7,7 +7,7 @@ lastUpdated: 2021-10-13T19:29:39+02:00
 
 Executes a callback immediately before a component is unmounted and destroyed.
 
-- Use `useEffect()` with an empty array as the second argument. Return the provided callback to be executed only once before cleanup.
+- Use the `useEffect()` hook with an empty array as the second argument. Return the provided callback to be executed only once before cleanup.
 - Behaves like the `componentWillUnmount()` lifecycle method of class components.
 
 ```jsx