useEffect async setState code example

Example 1: react useeffect async

const MyFunctionnalComponent: React.FC = props => {
  useEffect(() => {
    // Using an IIFE
    (async function anyNameFunction() {
      await loadContent();
    })();
  }, []);  
  
  return <div></div>;
};

Example 2: useeffect async await

const getUsers = async () => {
 const users = await axios.get('https://randomuser.me/api/?page=1&results=10&nat=us');
 setUsers(users.data.results);
};

useEffect(() => {
 getUsers();
}, []);

Example 3: async useeffect

useEffect(() => {
  (async function anyNameFunction() {await loadContent();})();
}, []);

Example 4: usestate wait for set

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

...

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

Example 5: async useEffect

function OutsideUsageExample() {
  const [data, dataSet] = useState<any>(null)

  const fetchMyAPI = useCallback(async () => {
    let response = await fetch('api/data')
    response = await response.json()
    dataSet(response)
  }, [])

  useEffect(() => {
    fetchMyAPI()
  }, [fetchMyAPI])

  return (
    <div>
      <div>data: {JSON.stringify(data)}</div>
      <div>
        <button onClick={fetchMyAPI}>manual fetch</button>
      </div>
    </div>
  )
}