Revision history [back]

You can use a second parameter (an array) in the useEffect hook that specifies the state variable that the effect depends on. This will cause the effect to only run when the specified state variable is updated. Additionally, you can use async/await inside the effect to wait for the state to update before continuing with any additional logic.

Example:

import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [myState, setMyState] = useState('');

  useEffect(() => {
    async function fetchData() {
      // fetch some data using the new state value
      const data = await fetch(`https://example.com/api/${myState}`);
      // do something with the data
    }
    fetchData();
  }, [myState]);

  function handleButtonClick(event) {
    setMyState('new-value');
  }

  return (
    <div>
      <button onClick={handleButtonClick}>Update State</button>
      <p>Current State: {myState}</p>
    </div>
  );
}