useEffect() explained

Author: rohan-paul

MongoDB/populate-method-mongoose-referencing-other-model.md

@@ -1,3 +1,5 @@
+##### `.populate()` is a way to populate referenced subdocuments in any schema.
+
 Lets take an example of a social network, one collection for users, and one for posts. In my research before doing any coding, I stumbled upon `Model.populate()`, a Mongoose method that you can use to essentially link documents across collections.
 
 ### Step 1: Make your schemas
@@ -32,6 +34,8 @@ module.exports = {
 };
 ```
 
+### Most simply - If you run this query: Post.find({}).populate('user').exec(callback), Mongoose will look at the field user in the post, see that it has a ref to the User model, and find that user by its \_id
+
 This tells Mongoose “Hey, I’m gonna be referencing other documents from other collections”. The next part of that property is the ref (Post or User in the above code). The ref tells Mongoose “Those docs are going to be in the Post or User collection.”
 
 So in our User schema, we reference the Post collection, because we want the user to be tied to the things they post, and we want to be able to easily access those posts without having to create more queries.
@@ -149,25 +153,26 @@ And in my Profile routes I have the following API endpoint
 
 ```js
 router.get(
-  '/',
-  passport.authenticate('jwt', { session: false }),
+  "/",
+  passport.authenticate("jwt", { session: false }),
   (req, res) => {
     const errors = {}; // just like in user route, I want to append to the errors object for any actual errors that will be generated. And returning that object for the error case
 
     Profile.findOne({ user: req.user.id })
-      .populate('user', ['name', 'avatar'])
+      .populate("user", ["name", "avatar"])
       .then(profile => {
         if (!profile) {
-          errors.noprofile = 'There is not profile for this user';
+          errors.noprofile = "There is not profile for this user";
           return res.status(404).json(errors);
         }
         res.json(profile);
       })
       .catch(err => res.status(404).json(err));
   }
-)
+);
 ```
-In the  above A) I am populating my user's profile using the query builder. http://mongoosejs.com/docs/populate.html#population
+
+In the above A) I am populating my user's profile using the query builder. http://mongoosejs.com/docs/populate.html#population
 
 B) The first parameter of .populate() is the model you wish to use for population. If not specified, populate will look up the model by the name in the Schema's 'ref' field.
 http://mongoosejs.com/docs/api.html#query_Query-populate
@@ -177,22 +182,22 @@ C) The second parameter to .populate() is the Field selection for the population
 D) Population is the process of automatically replacing the specified paths in the document with document(s) from other collection(s). So, when I do the below
 
 Profile.findOne({ user: req.user.id })
-      .populate('user', ['name', 'avatar'])
+.populate('user', ['name', 'avatar'])
 
-Populated paths are no longer set to their original _id , their value is replaced with the mongoose document returned from the database by performing a separate query before returning the results.
+Populated paths are no longer set to their original \_id , their value is replaced with the mongoose document returned from the database by performing a separate query before returning the results.
 (http://mongoosejs.com/docs/populate.html)
 
 E) .populate() needs a query to attach itself to, so we are using Profile.findOne() to find a profile who matches the id I provide in the argument. This returns our user document. This is when .populate() takes over.
 
-F) Flow of .populate() -> After findOne() finds the req.user.id and assigns it to the variable 'user' > .populate() is called on user, it will go to the appropriate collection (user model in this case) , search for that _ids, and return my user with 'name' and 'avatar'
+F) Flow of .populate() -> After findOne() finds the req.user.id and assigns it to the variable 'user' > .populate() is called on user, it will go to the appropriate collection (user model in this case) , search for that \_ids, and return my user with 'name' and 'avatar'
 
 G) Why I can fetch user's model data with below line from profile route.
 
- Profile.findOne({ user: req.user.id })
-  .populate('user', ['name', 'avatar'])
+Profile.findOne({ user: req.user.id })
+.populate('user', ['name', 'avatar'])
+
+Because - In Profile model, I have the the 'user' property as ObjectId
 
- Because - In Profile model, I have the the 'user' property as ObjectId
- 
 ### Sources to read
 
 [https://medium.com/@nicknauert/mongooses-model-populate-b844ae6d1ee7](https://mongoosejs.com/docs/2.7.x/docs/populate.html)

React/HOC.md

@@ -1,4 +1,3 @@
-Intro
 To put it simply, a higher-order component is a function, that takes a component and returns a new component. I like to think of them as parameterized components. Many times I find myself creating several components with very similar logic, with only 1 or 2 changes. Once I find a use case like this, it’s very simple to abstract the shared logic, and put the logic that changes into parameters.
 
 You can read more about HOCs here, in the official React docs. Since components are just functions and HOCs are just functions that return other functions, we can use functional concepts to chain them using utilities methods such as compose, which is provided by many libraries (it's included in Redux!).

React/context-api-basics.md

@@ -16,52 +16,39 @@ Material UI provides a snackbar component which is great for these types of mess
 
 Many apps need to trigger messages from dozens of different components. The React Context API makes it dead simple to provide all components access to a shared snackbar so they can trigger these messages without needing to implement separate components for each message.
 
-
 ### [How Do I Use Context?](https://hackernoon.com/how-do-i-use-react-context-3eeb879169a2)
 
 [the codesandbox for this code](https://codesandbox.io/s/04l03y3q9v)
 
 Prop Drilling
 I’ve built an application that stores a family’s last name in a <Grandmother /> component. The <Child /> component than displays the last name.
 
-
 ```js
-const App = () => <Grandmother />
+const App = () => <Grandmother />;
 
 class Grandmother extends React.Component {
   state = {
     lastName: "Sanchez"
-  }
+  };
 
   render() {
-    return <Mother lastName={this.state.lastName} />
+    return <Mother lastName={this.state.lastName} />;
   }
 }
 
 const Mother = ({ lastName }) => {
-  return <Child lastName={lastName} />
-}
+  return <Child lastName={lastName} />;
+};
 
 const Child = ({ lastName }) => {
-  return <p>{lastName}</p>
-}
+  return <p>{lastName}</p>;
+};
 ```
 
 ### Context
 
 We can refactor this example to use Context instead. Using Context means we don’t need to pass the lastName through the <Mother /> component. We circumvent components that don’t need to know the lastName property, and share that state only with components that need to know it.
 
-First, we will need to create our Context.
-
-```js
-import React from "react";
-
-const FamilyContext = React.createContext({});
-
-export const FamilyProvider = FamilyContext.Provider;
-export const FamilyConsumer = FamilyContext.Consumer;js
-```
-
 First, we will need to create our Context in a seperate file, say **FamilyContext.js**
 
 ```js
@@ -73,9 +60,9 @@ export const FamilyProvider = FamilyContext.Provider;
 export const FamilyConsumer = FamilyContext.Consumer;
 ```
 
-We use`` createContext()`` and pass it an empty object as the default value:
+We use`createContext()` and pass it an empty object as the default value:
 
-``const FamilyContext = React.createContext({});``
+`const FamilyContext = React.createContext({});`
 
 We then create a Provider and a Consumer component and export them so they are available for consumption by other components in your application.
 
@@ -84,7 +71,7 @@ export const FamilyProvider = FamilyContext.Provider;
 export const FamilyConsumer = FamilyContext.Consumer;
 ```
 
-Here’s  the final and full code of how we will use the Provider and Consumer in the Grandmother.js file
+Here’s the final and full code of how we will use the Provider and Consumer in the Grandmother.js file
 
 ```js
 import React from "react";
@@ -116,6 +103,7 @@ const Child = () => {
   return <FamilyConsumer>{context => <p>{context}</p>}</FamilyConsumer>;
 };
 ```
+
 Now, we have wrapped the <Mother /> component with <FamilyProvider /> because it contains <Child /> which is the component that needs access to the lastName prop.
 
 ```js
@@ -130,21 +118,25 @@ To actually have access to the lastName, we have also wrapped the <p> tag on lin
 
 ### Let’s dig a bit deeper into <FamilyConsumer />!
 
-At first, it might look a bit confusing if you aren’t familiar with the render prop pattern, but with a bit of explanation I think you might find that it’s a fairly straightforward implementation. You don’t need to know how to build a render prop to use Context, but it’s a really powerful abstraction!
+At first, it might look a bit confusing if you aren’t familiar with the **[render prop](https://reactjs.org/docs/render-props.html)** pattern, but with a bit of explanation I think you might find that it’s a fairly straightforward implementation. You don’t need to know how to build a render prop to use Context, but it’s a really powerful abstraction!
 
 ### What’s a Render Prop?
 
-A render prop is a way of writing components in React so that they are reusable, and can take n number of children of any type. Render props appear in a couple of different disguises. Context implements a Function as a Child Pattern, which is just a render prop called children.
+The term **“render prop”** refers to a technique for sharing code between React components using a prop whose value is a function.
+
+A **render prop** is a way of writing components in React so that they are reusable, and can take n number of children of any type. Render props appear in a couple of different disguises. Context implements a Function as a Child Pattern, which is just a render prop called children.
 
 ```js
 const Child = () => {
   // Family Consumer uses the
   // Function as a Child pattern
-  return <FamilyConsumer>
-    // context is the object with lastName
-    // on it. It gets passed as an argument
-    {context => <p>{context}</p>}
-  </FamilyConsumer>;
+  return (
+    <FamilyConsumer>
+      // context is the object with lastName // on it. It gets passed as an
+      argument
+      {context => <p>{context}</p>}
+    </FamilyConsumer>
+  );
 };
 ```
 
@@ -153,11 +145,12 @@ const Child = () => {
 Ultimately, Context is a great tool to add to your React toolbox. Use it when you find prop drilling has become too complex, but your application isn’t large enough to warrant a third-party solution like MobX or redux.
 
 ### When Should I Use Context?
+
 [https://hackernoon.com/how-do-i-use-react-context-3eeb879169a2](https://hackernoon.com/how-do-i-use-react-context-3eeb879169a2)
 I would recommend reaching for Context when you find yourself passing props down through three or more levels in your component tree. You might notice that you have renamed your props, making it challenging to determine the data’s origin. You might consider implementing context if a bunch of your components know about irrelevant data.
 
 #### More References
 
 1> [https://medium.com/dailyjs/reacts-%EF%B8%8F-new-context-api-70c9fe01596b](https://medium.com/dailyjs/reacts-%EF%B8%8F-new-context-api-70c9fe01596b)
 
-2>
+2>

React/hooks-basics.md

@@ -0,0 +1,77 @@
+**useEffect**
+
+### you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.
+
+[https://reactjs.org/docs/hooks-effect.html](https://reactjs.org/docs/hooks-effect.html) - The Effect Hook lets you perform side effects in function components. Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects.
+
+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.
+
+## 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.
+
+### Example Using Classes {#example-using-classes}
+
+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}
+class Example extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			count: 0
+		};
+	}
+	componentDidMount() {
+		document.title = `You clicked ${this.state.count} times`;
+	}
+	componentDidUpdate() {
+		document.title = `You clicked ${this.state.count} times`;
+	}
+	render() {
+		return (
+			<div>
+				<p>You clicked {this.state.count} times</p>
+				<button
+					onClick={() =>
+						this.setState({ count: this.state.count + 1 })
+					}
+				>
+					Click me
+				</button>
+			</div>
+		);
+	}
+}
+```
+
+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.
+
+### 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}
+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>
+			<button onClick={() => setCount(count + 1)}>Click me</button>
+		</div>
+	);
+}
+```
+
+**What does `useEffect` do?** By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we'll refer to it as our "effect"), and call it later after performing the DOM updates. In this effect, we set the document title, but we could also perform data fetching or call some other imperative API.
+**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.

Redux/Store.md

@@ -8,4 +8,4 @@ A store is not a class. It's just an object with a few methods on it. To create
 
 Check my working file - [https://github.com/rohan-paul/React-snippets/blob/master/redux-show-list-of-micro-blog-posts/src/store.js](https://github.com/rohan-paul/React-snippets/blob/master/redux-show-list-of-micro-blog-posts/src/store.js)
 
-A store holds the whole state tree of my application. The only way to change the state inside it is to dispatch an action on it. A store is not a class. It's just an object with a few methods on it. To create it, pass your root reducing function to createStore.
+A store holds the whole state tree of my application. The only way to change the state inside it is to dispatch an action on it. A store is not a class. It's just an object with a few methods on it. To create it, pass your root reducing function to createStore.****