Stop useEffect from running on mount

by

You can’t configure it out of the box.

But, a common pattern is to use some isMounted flag like so:

// Is Mounted
const useFetchNotOnMount = () => {
  ...
  const isMounted = useRef(false);

  useEffect(() => {
    if (isMounted.current) {
      console.log('fetching');
      dispatch(fetchData(filters));
    } else {
      isMounted.current = true;
    }
  }, [dispatch, filters]);
};

// Same (Is First Render)
const useFetchNotOnMount = () => {
  ...
  const isFirstRender = useRef(true);

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
    } else {
      console.log("fetching");
      dispatch(fetchData(filters));
    }
  }, [dispatch, filters]);
};

More Related Contents:

  1. In useEffect, what’s the difference between providing no dependency array and an empty one?
  2. In general is it better to use one or many useEffect hooks in a single component? [closed]
  3. How to fix missing dependency warning when using useEffect React Hook
  4. How to use `setState` callback on react hooks
  5. React useEffect in depth / use of useEffect?
  6. How to use callback with useState hook in react [duplicate]
  7. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  8. How to use throttle or debounce with React Hook?
  9. React useReducer async data fetch
  10. Simple Conditional Routing in Reactjs
  11. Next.js – Error: only absolute urls are supported
  12. Use Connect or pass data as props to children
  13. How to sync props to state using React hooks : setState()
  14. React Hooks: useEffect() is called twice even if an empty array is used as an argument
  15. React.useState does not reload state from props
  16. How does connect work without mapDispatchToProps
  17. React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function
  18. React router, pass data when navigating programmatically?
  19. React: useState or useRef?
  20. Lazy initial state – What it is and how to use it?
  21. React Hooks – Modified state not reflecting immediately
  22. React hook rendering an extra time
  23. How to test a react component that is dependent on useContext hook?
  24. What is the expected return of `useEffect` used for?
  25. how to async/await redux-thunk actions?
  26. ReactJS – prevState in the new useState React hook?
  27. Cache busting with CRA React
  28. My Redux state has changed, why doesn’t React trigger a re-render?
  29. How to create dynamic refs in functional component- Using useRef Hook
  30. React – Is useState ‘s setter function able to change?

Leave a Comment