What is the expected return of `useEffect` used for?

by

Why is the return a function? return () => { ignore = true };

From the docs,

Why did we return a function from our effect? This is the optional cleanup mechanism for effects. Every effect may return a function that cleans up after it. This lets us keep the logic for adding and removing subscriptions close to each other. They’re part of the same effect!

And

When exactly does React clean up an effect? React performs the cleanup when the component unmounts. However, as we learned earlier, effects run for every render and not just once. This is why React also cleans up effects from the previous render before running the effects next time. We’ll discuss why this helps avoid bugs and how to opt out of this behavior in case it creates performance issues later below.

What is ignored used for in this example?

Initially in useEffect Hook ignore is set like, let ignore = false;.
When fetchProduct function executes it checks for ignore is true and accordingly sets setProduct(json). This means we have state called product and setting the value in state using setProduct(json). This product in state is used to render details on page.

Note: As [productId] is passed as second argument to useEffect, fetchProduct function will only get executes when productId changes.

See optimizing performance by skipping effects.

More Related Contents:

  1. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  2. Put A Warning If Page Refresh in ReactJS
  3. What’s the difference between “super()” and “super(props)” in React when using es6 classes?
  4. Infinite loop in useEffect
  5. How to use `setState` callback on react hooks
  6. ReactJS giving error Uncaught TypeError: Super expression must either be null or a function, not undefined
  7. In useEffect, what’s the difference between providing no dependency array and an empty one?
  8. React useState cause double rendering
  9. React useState hook event handler using initial state
  10. mobx-react observer don’t fires when I set observable
  11. React useReducer async data fetch
  12. Line 0: Parsing error: Cannot read property ‘map’ of undefined
  13. How to import and export components using React + ES6 + webpack?
  14. In React ES6, why does the input field lose focus after typing a character?
  15. How to tell webpack dev server to serve index.html for any route
  16. Unexpected block statement surrounding arrow body
  17. ReactJS with ES6: this.props is not a function when I communicate two components
  18. useNavigate() may be used only in the context of a component
  19. Testing React components that fetches data using Hooks
  20. Value of “this” is incorrect when debugging Babel transpiled React with Chrome Devtools
  21. Why React useState with functional update form is needed?
  22. React.useState does not reload state from props
  23. How do react hooks determine the component that they are for?
  24. useReducer Action dispatched twice
  25. Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’
  26. is it possible to React.useState(() => {}) in React?
  27. React Hooks – How do I implement shouldComponentUpdate?
  28. How to assign the correct typing to React.cloneElement when giving properties to children?
  29. How to test a react component that is dependent on useContext hook?
  30. How to create dynamic refs in functional component- Using useRef Hook

Leave a Comment