useEffect replacing life cycle methods

Author: rohan-paul

React/hooks-useEffect-api-call.md renamed to React/Hooks/useEffect-api-call.md

@@ -1,5 +1,3 @@
-**useEffect**
-
 ### you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.
 
 Mutations, subscriptions, timers, logging, and other side effects are not allowed inside the main body of a function component (referred to as React’s render phase). Doing so will lead to confusing bugs and inconsistencies in the UI. **According to doc function passed to useEffect fires after layout and paint.**
@@ -10,7 +8,7 @@ In React class components, the render method itself shouldn’t cause side effec
 
 This is why in React classes, we put side effects into componentDidMount and componentDidUpdate.
 
-## Effects Without Cleanup {#effects-without-cleanup}
+### Effects Without Cleanup {#effects-without-cleanup}
 
 Sometimes, we want to **run some additional code after React has updated the DOM.** Network requests, manual DOM mutations, and logging are common examples of effects that don't require a cleanup. We say that because we can run them and immediately forget about them. Let's compare how classes and Hooks let us express such side effects.
 
@@ -19,7 +17,7 @@ Sometimes, we want to **run some additional code after React has updated the DOM
 In React class components, the `render` method itself shouldn't cause side effects. It would be too early -- we typically want to perform our effects _after_ React has updated the DOM.
 This is why in React classes, we put side effects into `componentDidMount` and `componentDidUpdate`. Coming back to our example, here is a React counter class component that updates the document title right after React makes changes to the DOM:
 
-```js{9-15}
+```js
 class Example extends React.Component {
   constructor(props) {
     super(props);
@@ -48,19 +46,23 @@ class Example extends React.Component {
 
 Note how **we have to duplicate the code between these two lifecycle methods in class.**
 This is because in many cases we want to perform the same side effect regardless of whether the component just mounted, or if it has been updated. Conceptually, we want it to happen after every render -- but React class components don't have a method like this. We could extract a separate method but we would still have to call it in two places.
-Now let's see how we can do the same with the `useEffect` Hook.
+
+Now let's see how we can do the same with the `**useEffect**` Hook.
 
 ### Example Using Hooks {#example-using-hooks}
 
 We've already seen this example at the top of this page, but let's take a closer look at it:
 
-```js{1,6-8}
+```js
 import React, { useState, useEffect } from "react";
+
 function Example() {
   const [count, setCount] = useState(0);
+
   useEffect(() => {
     document.title = `You clicked ${count} times`;
   });
+
   return (
     <div>
       <p>You clicked {count} times</p>
@@ -76,4 +78,22 @@ The state and state update function come from the state hook called useState
 
 **Why is `useEffect` called inside a component?** Placing `useEffect` inside the component lets us access the `count` state variable (or any props) right from the effect. We don't need a special API to read it -- it's already in the function scope. Hooks embrace JavaScript closures and avoid introducing React-specific APIs where JavaScript already provides a solution.
 
-**Does `useEffect` run after every render?** Yes! By default, it runs both after the first render _and_ after every update. (We will later talk about [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.
+**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
+
+[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)
+
+**By default, effects run after every completed render. But, you can choose to fire it only when certain values have changed, passing an array of variables as a second optional parameter.**
+
+```js
+// Without the second parameter
+useEffect(() => {
+  console.log("I will run after every render");
+});
+
+// With the second parameter
+useEffect(() => {
+  console.log("I will run only when valueA changes");
+}, [valueA]);
+```

React/hooks-useEffect.md renamed to React/Hooks/useEffect-basics-1.md

@@ -0,0 +1,48 @@
+For each of the three most common lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount), I will demonstrate a class style implementation
+
+### componentDidMount
+
+```js
+// First the class component Example
+class Example extends React.Component {
+  componentDidMount() {
+    console.log("I am mounted!");
+  }
+  render() {
+    return null;
+  }
+}
+
+// With hooks the same above Example component
+function Example() {
+  useEffect(() => console.log("I am mounted"), []);
+  return null;
+}
+```
+
+#### The second argument is an array of values (usually props).
+
+If any of the value in the array changes, the callback will be fired after every render.
+When it's not present, the callback will always be fired after every render.
+When it's an empty list, the callback will only be fired once, similar to componentDidMount.
+
+### componentDidUpdate
+
+```js
+componentDidMount() {
+  console.log('mounted or updated');
+}
+
+componentDidUpdate() {
+  console.log('mounted or updated');
+}
+useEffect(() => console.log('mounted or updated'));
+```
+
+There is not a straight forward implementation in hooks to replace componentDidUpdate. **The useEffect function can be used to trigger callbacks after every render of the component including after component mounts and component updates.**
+However this is not a big problem since most of the time we place similar functions in componentDidMount and componentDidUpdate.
+
+#### Further Reading
+
+- 1. [https://dev.to/trentyang/replace-lifecycle-with-hooks-in-react-3d4n](https://dev.to/trentyang/replace-lifecycle-with-hooks-in-react-3d4n)
+- 2. [https://alligator.io/react/replacing-component-lifecycles-with-useeffect/](https://alligator.io/react/replacing-component-lifecycles-with-useeffect/)

React/Hooks/useEffect-replace-componentDidMount-and-Update.md

@@ -0,0 +1,20 @@
+#### Replacing componentWillUnmount with useEffect()
+
+```js
+componentWillUnmount() {
+  console.log('will unmount');
+}
+
+// Now to replicate the above, just return a function inside useEffect() which will do the same job that I amd doing inside componentWillUnmount
+useEffect(() => {
+  return () => {
+    console.log('will unmount');
+  }
+}, []);
+```
+
+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.
+
+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.
+
+Normally we do cleanups in the componentWillUnmount. Let's say you want to create an event listener on componentDidMount and clean it up on componentDidUnmount. With hooks the code will be combined into one callback function.

React/Hooks/useEffect-replace-componentWillUnmount.md

@@ -6,13 +6,11 @@ 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 synatax](https://reactjs.org/docs/hooks-state.html#tip-what-do-square-brackets-mean)
+By the [Official doc on the above array-destructuring syntax](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:
 
-Every useReducer comes with its own dispatch function.
-
-The **useReducer** function is tightly coupled to its reducer and its dispatch function. We dispatch action objects to that reducer only.
+Every useReducer comes with its own dispatch function. The **useReducer** function is tightly coupled to its reducer and its dispatch function. We dispatch action objects to that reducer only that useReducer() function takes as its first argument.
 
 #### Now an example to convert a useState() to a useReducer()
 

React/hooks-with-Redux-actions-inside-useEffect.md renamed to React/Hooks/useEffect-with-Redux-actions-GOOD.md

@@ -96,6 +96,32 @@ The setState it returns is almost the same used by class components—it can acc
 
 Each call to useState is paired with a component, with its state persisting across renders. This means that you can call useState multiple times within a single function component to get multiple independent state values. Because the setState returned isn't scoped to a single component, we can define stateful behaviors independent of the component. This enables powerful new ways to abstract stateful logic.
 
+#### When we want to display the current count in a class, we read this.state.count:
+
+```js
+<p>You clicked {this.state.count} times</p>
+```
+
+**In a function, we can use count directly:**
+
+`<p>You clicked {count} times</p>`
+
+#### Updating State
+
+In a class, we need to call this.setState() to update the count state:
+
+```js
+<button onClick={() => this.setState({ count: this.state.count + 1 })}>
+  Click me
+</button>
+```
+
+**In a function, we already have setCount and count as variables so we don’t need this:**
+
+```js
+<button onClick={() => setCount(count + 1)}>Click me</button>
+```
+
 #### Further Reading
 
 - [https://medium.com/@vcarl/everything-you-need-to-know-about-react-hooks-8f680dfd4349](https://medium.com/@vcarl/everything-you-need-to-know-about-react-hooks-8f680dfd4349)

React/hooks-useReducers.md renamed to React/Hooks/useReducers-basics-1.md

@@ -1 +1,3 @@
 While useReducer with its reducer is a part of how Redux works, it isn’t Redux. The useReducer function is tightly coupled to its reducer which holds also true for its dispatch function. We dispatch action objects to that reducer only. Whereas in Redux, the dispatch function sends the action object to the store which distributes it to all its combined reducer functions. You can think of Redux as one global event bus which takes any events (actions) and processes them into a new state based on the action’s payload and the previous state.
+
+In other words, Redux provides a global store where you can keep app data centralized. useReducer is localized to a specific component.