useEffect() explained

Author: rohan-paul

React/hooks-useEffect-api-call.md

@@ -0,0 +1,73 @@
+Example - Fetching Hacker News hits data - The App component shows a list of items (hits = Hacker News articles). The state and state update function come from the state hook called useState that is responsible to manage the local state for the data that we are going to fetch for the App component. The initial state is an empty list of hits in an object that represents the data. No one is setting any state for this data yet.
+
+```js
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+
+function App() {
+	const [data, setData] = useState({ hits: [] });
+
+	useEffect(async () => {
+		const result = await axios(
+			"http://hn.algolia.com/api/v1/search?query=redux"
+		);
+
+		setData(result.data);
+	}, []);
+
+	return (
+		<ul>
+			{data.hits.map(item => (
+				<li key={item.objectID}>
+					<a href={item.url}>{item.title}</a>
+				</li>
+			))}
+		</ul>
+	);
+}
+
+export default App;
+```
+
+The effect hook called useEffect is used to fetch the data with axios from the API and to set the data in the local state of the component with the state hook’s update function. The promise resolving happens with async/await.
+
+However, when you run your application, you should stumble into a nasty loop. The effect hook runs when the component mounts but also when the component updates. Because we are setting the state after every data fetch, the component updates and the effect runs again. It fetches the data again and again. That’s a bug and needs to be avoided. We only want to fetch data when the component mounts. That’s why you can provide an empty array as second argument to the effect hook to avoid activating it on component updates but only for the mounting of the component.
+
+The second argument can be used to define all the variables (allocated in this array) on which the hook depends. If one of the variables changes, the hook runs again. If the array with the variables is empty, the hook doesn’t run when updating the component at all, because it doesn’t have to watch any variables.
+
+There is one last catch. In the code, we are using async/await to fetch data from a third-party API. According to the documentation every function annotated with async returns an implicit promise: “The async function declaration defines an asynchronous function, which returns an AsyncFunction object. An asynchronous function is a function which operates asynchronously via the event loop, using an implicit Promise to return its result. “. However, an effect hook should return nothing or a clean up function. That’s why you may see the following warning in your developer console log: 07:41:22.910 index.js:1452 Warning: useEffect function must return a cleanup function or nothing. Promises and useEffect(async () => …) are not supported, but you can call an async function inside an effect.. That’s why using async directly in the useEffect function isn’t allowed. Let’s implement a workaround for it, by using the async function inside the effect.
+
+```js
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+
+function App() {
+	const [data, setData] = useState({ hits: [] });
+
+	useEffect(() => {
+		const fetchData = async () => {
+			const result = await axios(
+				"http://hn.algolia.com/api/v1/search?query=redux"
+			);
+
+			setData(result.data);
+		};
+
+		fetchData();
+	}, []);
+
+	return (
+		<ul>
+			{data.hits.map(item => (
+				<li key={item.objectID}>
+					<a href={item.url}>{item.title}</a>
+				</li>
+			))}
+		</ul>
+	);
+}
+
+export default App;
+```
+
+[Source](https://www.robinwieruch.de/react-hooks-fetch-data/)

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

@@ -72,6 +72,8 @@ function Example() {
 }
 ```
 
+The state and state update function come from the state hook called useState
+
 **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.