Executing async code on update of state with react-hooks

by

useState setter doesn’t provide a callback after state update is done like setState does in React class components. In order to replicate the same behaviour, you can make use of the a similar pattern like componentDidUpdate lifecycle method in React class components with useEffect using Hooks

useEffect hooks takes the second parameter as an array of values which React needs to monitor for change after the render cycle is complete.

const [loading, setLoading] = useState(false);

...

useEffect(() => {
    doSomething(); // This is be executed when `loading` state changes
}, [loading])
setLoading(true);

EDIT

Unlike setState, the updater for useState hook doesn’t have a callback, but you can always use a useEffect to replicate the above behaviour. However you need to determine the loading change

The functional approach to your code would look like

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

const prevLoading = usePrevious(isLoading);

useEffect(() => {
   if (!prevLoading && isLoading) {
       getOrders({
          page: page + 1,
          query: localQuery,
          held: localHoldMode,
          statuses: filterMap[filterBy],
      })
      .then((o) => {
        const { orders: fetchedOrders } = o.data;
        const allOrders = orders.concat(fetchedOrders);

        setOrders(allOrders);
        setPage(page + 1);
        setPagesSeen([...pagesSeen, page + 1]);
        setPrefetchedOrders(null);
        setIsLoading(false);
      })
      .catch(e => console.error(e.message));
   }
}, [isLoading, preFetchedOrders, orders, page, pagesSeen]);

const getNextPage = () => {
    // This will scroll back to the top, and also trigger the prefetch for the next page on the way up.
    goToTop();

    if (pagesSeen.includes(page + 1)) {
      return setPage(page + 1);
    }

    if (prefetchedOrders) {
      const allOrders = orders.concat(prefetchedOrders);
      setOrders(allOrders);
      setPage(page + 1);
      setPagesSeen([...pagesSeen, page + 1]);
      setPrefetchedOrders(null);
      return;
    }

    setIsLoading(true);
  };

More Related Contents:

  1. The useState set method is not reflecting a change immediately
  2. State not updating when using React state hook within setInterval
  3. Make React useEffect hook not run on initial render
  4. Push method in React Hooks (useState)?
  5. How can I use React hooks in React classic `class` component?
  6. Is it possible to share states between components using the useState() hook in React?
  7. Why is useState not triggering re-render?
  8. Updating and merging state object using React useState() hook
  9. componentDidMount equivalent on a React function/Hooks component?
  10. react useEffect comparing objects
  11. How to register event with useEffect hooks?
  12. React useState hook event handler using initial state
  13. Is there a generic way to set state in React Hooks? How to manage multiple states?
  14. How do I update states `onChange` in an array of object in React Hooks
  15. React Function Components with hooks vs Class Components
  16. React useEffect causing: Can’t perform a React state update on an unmounted component
  17. useEffect does not listen for localStorage
  18. setTimeout for this.state vs useState
  19. How does JavaScript mechanism behind react hooks work?
  20. What is useState() in React?
  21. Why need useRef and not mutable variable?
  22. React – useState – why setTimeout function does not have latest state value?
  23. Determine which dependency array variable caused useEffect hook to fire
  24. Updating state to the same state directly in the component body
  25. Proper way of using React hooks + WebSockets
  26. React hook useEffect runs continuously forever/infinite loop
  27. useMemo vs. useEffect + useState
  28. Equivalent to componentDidUpdate using React hooks
  29. Updating state to the same value directly in the component body during render causes infinite loop
  30. React Hooks render twice

Leave a Comment