react hook for waiting state update (useAsyncState)

adelchms96 — Sun, 13 Dec 2020 11:30:33 +0000

hello guys, React is an awesome library especially after introducing hooks in function component which help us minimize the code writing already written in class components, but this didn't change how react work especially state update which happen asynchronous.
So image we want to invoke a function on each state update, we need to invoke it from useEffect like this example:

function App() {
  const [state, setState] = useState(0);
useEffect(()=>{
console.log(state);
},[state])
  return (
    <button onClick={()=>setState(prev => prev + 1)}>
      {state}
      increment
    </button>
  );
}

but why we can't have to wait for set update to happen then invoke our function like this:

 const currentState = await setState(prev => prev + 1);
 console.log(currentState);

this what useAsyncState come for have a look at the code:

import { useState, useRef, useCallback, useEffect } from "react";

function useAsyncState(initialState) {
  const [state, setState] = useState(initialState);
  const resolveState = useRef();
  const isMounted = useRef(false);

  useEffect(() => {
    isMounted.current = true;

    return () => {
      isMounted.current = false;
    };
  }, []);

  useEffect(() => {
    if (resolveState.current) {
      resolveState.current(state);
    }
  }, [state]);

  const setAsyncState = useCallback(
    newState =>
      new Promise(resolve => {
        if (isMounted.current) {
          resolveState.current = resolve;
          setState(newState);
        }
      }),
    []
  );

  return [state, setAsyncState];
}

export default useAsyncState;

usage no need for the useEffect anymore :

function App() {
  const [state, setState] = useAsyncState(0);
  const click = async () => {
    const currentState = await setState(prev => prev + 1);
    console.log(currentState);
  };
  return (
    <button onClick={click}>
      {state}
      increment
    </button>
  );
}

UseFetch hook for react js.

adelchms96 — Fri, 31 Jul 2020 17:25:56 +0000

hello guys, will show you a custom hook for handling async call.
useFetch hook take a callback as first argument and callback params for rest arguments.
here it's:

const useFetch = (cb, ...params) => {
  const isMounted = useRef();
  const [response, setResponse] = useState();
  const [loading, setLoading] = useState(false);
  //const [error, setError] = useState();

  return {
    response,
    loading,
    isMounted,
    reset: () => setResponse(),
    fetch: async (reload = false) => {
      try {
        isMounted.current = true;
        if (!response || reload) setLoading(true);
        const data = await cb(...params);
        if (isMounted.cuurent) {
          if (data) setResponse(data)
        }
      } catch (error) {
        errorNotification(error); // do something with the error
        // or u can add setError(error)
      }
      finally{
     setLoading(false);
       }
    }
  };
};

Usage:

const UserProfile = ({ id }) => {
  const { response, loading, fetch, isMounted } = useFetch(getUserProfile, id);
  useEffect(() => {
    fetch();
    return () => {
      isMounted.current = false;
    };
  }, []);
  return (
    <>{loading ? <p>Loading...</p> : response && <p>{response.userName}</p>}</>
  );
};

Note: isMounted is used to detect component unmount for not firing unnecessary state update.
hope you like it,thanks.

DEV Community: adelchms96

react hook for waiting state update (useAsyncState)

UseFetch hook for react js.