useEffect

1. useEffect() side effects

   Pure functions can only perform data calculations. Where should operations that do not involve calculations (such as generating logs, storing data, changing application status, etc.) be written?

   Functional programming refers to operations that have nothing to do with data calculations as “side effects” (side effect). If the function directly contains operations that produce side effects, it is no longer a pure function, and we call it an impure function.

   
   

   Pure functions can contain side effects only through indirect means (i.e. through other function calls).

​

2. useEffect() basic usage

   For example, we want the page title (document.title) to change when the component loads. Then, the operation of changing the page title is a side effect of the component and must be implemented through useEffect().

   By default, useEffect is executed every time the component renders.

   import React, { useEffect } from 'react';
   
   function Welcome(props) {
      useEffect(() => {
        document.title = 'Loading complete';
      });
      return <h1>Hello, {props.name}</h1>;
   }

​

3. useEffect() second parameter

   Sometimes, we don’t want useEffect() to be executed every time it is rendered. At this time, we can use its second parameter, use an array to specify the dependencies of the side effect function, and re-render only when the dependencies change.

   function Welcome(props) {
      useEffect(() => {
        document.title = `Hello, ${props.name}`;
      }, [props.name]);
      return <h1>Hello, {props.name}</h1>;
   }

   In the above example, the second parameter of useEffect() is an array, which specifies the dependencies of the first parameter (side effect function) (props.name ). The side effect function executes only when this variable changes.

   
   

   If the second parameter is an empty array, it indicates that the side effect parameter does not have any dependencies. Therefore, the side effect function will only be executed once after the component is loaded into the DOM, and will not be executed again after the component is re-rendered.

   
   

4. useEffect() purpose

   Any side effects can be introduced using useEffect(). Its common uses are as follows.

   • data fetching
   • event monitoring or subscription (setting up a subscription)
   • changing the DOM
   • output log (logging)

   The most common usage is to fetch data, execute useEffect() only once when the component is mounted, and use setState() to put the fetched data into the state.

   
   

5. The return value of useEffect()

   Side effects occur as components are loaded, and may need to be cleaned up when the component is unloaded. If there is any content mounted on dom in useEffect(), you need to use return to clear it. Otherwise, problems will occur, such as memory overflow causing more and more cards.

   
   

   useEffect() allows returning a function that is executed when the component is unmounted, cleaning up side effects. useEffect() does not return any value if there is no need to clean up side effects.

   
   

   In actual use, since the side effect function is executed every time it is rendered by default, the cleanup function will not only be executed once when the component is unloaded, but will also be executed once every time the side effect function is re-executed. Used to clean up side effects from the last render.

   
   

6. Use the return value of useEffect() to interrupt outstanding network requests

   Both axios and fetch have similar methods to interrupt network requests, such as abort() method.

   You can put the API request in useEffect() and the abort() method in return. At this time, if the API is called repeatedly by triggering useEffect, abort() in the return of the previous useEffect will be triggered. If the previous API request was not completed, it will be interrupted.

   
   

7. Notes for useEffect()

   There is one caveat when using useEffect(). If there are multiple side effects, and there is no relationship between them, multiple useEffect() should be called, and should not be written together.

   useEffect() does not want to return any value. Therefore, if you put a timer in it, because the timer will return the thread number, it will generate a value. If you don’t use const x=, you will get an error.