I have a useEffect function that is calling some data from a database and then sets the value under as 'data'. My problem is that useEffect is causing my application to render twice causing the user profile to give two values during the session, making me unable to use data:

const [data, setData] = useState([]);
const [error, setError] = useState(null);

useEffect(() => {
    fetch("http://localhost:5000/record")
      .then((res) => res.json())
      .then(
        (result) => {
          setData(result);
        },
        (error) => {
          setError(error);
        }
      );
  }, []);
  let userProfile = data.find((x) => (x.email = user.email));
  console.log(userProfile);