add how to think about use-effect?

Author: Surjit Kumar Sahoo

docs/4.performance/2.what-are-hooks.md

@@ -3,7 +3,7 @@ sidebar_position: 2
 slug: what-are-hooks
 ---
 
-# What Are Hooks?
+# What Are Hooks? 🪝
 
 :::info Hooks are all about memoization
 It is an optimization technique.

docs/4.performance/4.how-to-think-about-use-effect.md

@@ -0,0 +1,66 @@
+---
+sidebar_position: 4
+slug: how-to-think-about-use-effect
+title: How to think about useEffect
+---
+
+# How to think about `useEffect`?
+
+## `useDefect` or `useFootGun` 🦶🏼🔫
+
+Yes, I'm not kidding, useEffect can produce hard-to-understand, un-maintainable, unpredictable code. Chained useEffects can also produce cascading chain reactions of unpredictability if not used properly. **In most cases, you do not need useEffect, it can be handled with event driven approach.**
+
+But that doesn't mean there's no use of useEffect. It's primary use is to handle subscriptions. When the component mounts you want to subscribe to some-stuff, and then when the component un-mounts, you cleanup the subscriptions.
+
+:::tip
+Think of useEffect as `useSynchronize`
+:::
+Imagine you're watching TV, if you change channels, the content of that TV channel doesn't stop coming, You just don't care about that content anymore, that's all. useEffect helps you subscribe to the desired channel, consume content and when you're done, you can unsubscribe.
+
+### React 18 made it clear
+
+In React 18, the following code will run twice, not once!
+
+```jsx showLineNumbers title="BAD 💩🧨💣"
+function App() {
+  // ...
+
+  useEffect(() => {
+    authenticate();
+  }, []);
+
+  // ...
+}
+```
+
+- It's react's way of telling you, you're not using `useEffect` as intended!
+- Your components must be robust to component updates and mounts.
+
+```jsx showLineNumbers title="Hack | Workaround"
+let initialized = false;
+
+function App() {
+  //...
+
+  useEffect(() => {
+    if (!initialized) {
+      initialized = true;
+      authenticate();
+    }
+  }, []);
+
+  // ...
+}
+```
+
+```jsx showLineNumbers title="Or just remove the useEffect all-together ✅"
+// If you're using Next.JS check you're running in browser
+if (typeof window !== 'undefined') {
+  // ✅ Only runs once per app load
+  authenticate();
+}
+
+function App() {
+  //...
+}
+```