useEffect dependency array

Author: rohan-paul

React/Hooks/convert-ClassBasedForm-to-HooksBasedForm.md

@@ -80,12 +80,14 @@ const FunctionBasedForm = () => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
 
+  // Note to declare function inside the function-based-component I have to user the keyword 'const'
   const handleSubmit = event => {
     event.preventDefault();
     console.log(email);
     console.log(password);
   };
 
+  // Note also NO 'this' keyword is needed to invoke the handleSubmit() function in the Form
   return (
     <Form onSubmit={handleSubmit}>
       <h1>Function Based Form</h1>

React/Hooks/lifeCycle-methods-for-various-hooks.md

@@ -0,0 +1,13 @@
+https://reactjs.org/docs/hooks-faq.html#how-do-lifecycle-methods-correspond-to-hooks
+
+constructor: Function components don’t need a constructor. You can initialize the state in the useState call. If computing the initial state is expensive, you can pass a function to useState.
+
+**getDerivedStateFromProps**: Schedule an update while rendering instead.
+
+**shouldComponentUpdate**: See React.memo below.
+
+**render**: This is the function component body itself.
+
+**componentDidMount**, **componentDidUpdate**, **componentWillUnmount**: The useEffect Hook can express all combinations of these (including less common cases).
+
+**componentDidCatch** and **getDerivedStateFromError**: There are no Hook equivalents for these methods yet, but they will be added soon.

React/Hooks/useEffect-basics-1.md

@@ -80,7 +80,7 @@ The state and state update function come from the state hook called useState
 
 **Does `useEffect` run after every render?** Yes! By default, it runs both after the first render _and_ after every update. (We separately talk about below [how to customize this](#tip-optimizing-performance-by-skipping-effects). Instead of thinking in terms of "mounting" and "updating", you might find it easier to think that effects happen "after render". React guarantees the DOM has been updated by the time it runs the effects.
 
-#### Great explanation of the second array argument to useEffect() - so to control when useEffect() will run
+#### Great explanation of the second array (called the dependencies array) argument to useEffect() - so to control when useEffect() will run
 
 [https://medium.com/javascript-in-plain-english/state-management-with-react-hooks-no-redux-or-context-api-8b3035ceecf8](https://medium.com/javascript-in-plain-english/state-management-with-react-hooks-no-redux-or-context-api-8b3035ceecf8)
 

React/Hooks/useEffect-compare-array-in-second-argument-Example-1.md

@@ -0,0 +1,52 @@
+#### The problem around dependency array
+
+I trying to wrap my head around the new hooks api of react. Specifically, I'm trying to construct the classic use case that once was the following:
+
+```js
+componentDidUpdate(prevProps) {
+    if (prevProps.foo !== this.props.foo) {
+        // animate dom elements here...
+        this.animateSomething(this.ref, this.props.onAnimationComplete);
+    }
+}
+```
+
+Now, I tried to build the same with a function component and useEffect, but can't figure out how to do it. This is what I tried:
+
+```js
+useEffect(() => {
+  animateSomething(ref, props.onAnimationComplete);
+}, [props.foo]);
+```
+
+This way, the effect is only called when props.foo changes. And that does work – BUT! It appears to be an anti-pattern since the eslint-plugin-react-hooks marks this as an error. All dependencies that are used inside the effect should be declared in the dependencies array. So that means I would have to do the following:
+
+```js
+useEffect(() => {
+  animateSomething(ref, props.onAnimationComplete);
+}, [props.foo, ref, props.onAnimationComplete]);
+```
+
+That does not lead to the linting error BUT it totally defeats the purpose of only calling the effect when props.foo changes. I don't WANT it to be called when the other props or the ref change.
+
+#### The Solution
+
+const previousFooRef = useRef(props.foo);
+
+```js
+useEffect(() => {
+  if (previousFooRef.current !== props.foo) {
+    animateSomething(ref, props.onAnimationComplete);
+    previousFooRef.current = props.foo;
+  }
+}, [props.foo, props.onAnimationComplete]);
+```
+
+You can't avoid the complexity of having a condition inside the effect, because without it you will run your animation on mount rather than just when props.foo changes. The condition also allows you to avoid animating when things other than props.foo change.
+
+By including props.onAnimationComplete in the dependencies array, you avoid disabling the lint rule which helps ensure that you don’t introduce future bugs related to missing dependencies.
+
+### Further Reading
+
+- 1.  [https://stackoverflow.com/questions/55228102/react-hook-useeffect-dependency-array](https://stackoverflow.com/questions/55228102/react-hook-useeffect-dependency-array)
+- 2. [https://codesandbox.io/s/oll0y54436?fontsize=14](https://codesandbox.io/s/oll0y54436?fontsize=14)

React/Hooks/useEffect-compare-array-in-second-argument-Example-2.md

@@ -0,0 +1,19 @@
+The Issue / Problem - Effect re-run endlessly when using an array as a second argument for useEffect which is not the case when I use the array.length instead
+
+CodeSandbox : [codesandbox.io/s/nrwq08p9zj](codesandbox.io/s/nrwq08p9zj) (you can see that the console keeps logging into console)
+
+Guidance on how to resolve this - This is the expected behaviour. the default behaviour of useEffect's second argument is to do a shallow equal check on what's passed in; since you're passing a new array (since getArray returns a new array instance each time) as the first element of the array (ie, it's a nested array), comparing on it will miss the cache and run the effect again. You can work around this by either making sure you pass the same instance of the array, or by passing values that can be compared shallowly in the array. eg -
+
+```js
+useEffect(() => {
+  /* ... */
+}, [someHashingFunction(array)]);
+// we could use a hashing function (like murmur3 or md5) to generate a value to compare against
+```
+
+This also explains why it doesn't rerender when you use array.length, since it doesn't change between renders; however that is buggy, because it also means your component won't rerender when the array contents change, but with the same length. Don't do this.
+
+#### Further Reading
+
+- 1.  [https://github.com/facebook/react/issues/14324](https://github.com/facebook/react/issues/14324)
+- 2.

React/Hooks/useEffect-replace-componentWillUnmount.md

@@ -13,7 +13,11 @@ useEffect(() => {
 }, []);
 ```
 
-**IMPORTANT - When you return a function in the callback passed to useEffect, the returned function will be called before the component is removed from the UI. So to clean up the side effects you must return a function.**
+**IMPORTANT - When you return a function in the callback passed to useEffect, the returned function will be called before the component is removed from the UI. In other words, Whatever function we return from the useEffect will be treated as componentWillUnmount and will run either when the useEffect runs again or when the component is about to leave the UI.**
+**So to clean up the side effects you must return a function.**
+
+**we can also use as many useEffect we want to add. That means you can subscribe to an event and unsubscribe from it inside one useEffect and hit APIs in another useEffect**
+[Source](https://medium.com/recraftrelic/usestate-and-useeffect-explained-cdb5dc252baf)
 
 As we discussed previously, we need to pass an empty list as the second argument for useEffect so that the callback will only be called once. This apply to the returned function too.
 

React/Hooks/useReducers-basics-1.md

@@ -6,7 +6,13 @@ Given the return value from **useReducer** is in the form object, I can do de-st
 
 `const [state, dispatch] = useReducer(reducer, initialState)`
 
-By the [Official doc on the above array-destructuring syntax](https://reactjs.org/docs/hooks-state.html#tip-what-do-square-brackets-mean)
+**reducer** is a function that takes a state and action and returns a newState. So the above signature of useReducer() effectively becomes the below
+
+`const [state, dispatch] = useReducer((state, action) => newState)`
+
+The newState returned from the reducer is then consumed by the component via the state variable.
+
+[For the destructuring syntax by the](https://reactjs.org/docs/hooks-state.html#tip-what-do-square-brackets-mean)
 
 It means that we’re making two new variables **state** and **dispatch**, where **state** is set to the first value returned by **useReducer**, and **dispatch** is the second. It is equivalent to this code: