React questions

questions.jsx

/* eslint-disable */
import React from "react";

export function Component1(props) {
  const [user, setUser] = useState();

  useEffect(() => {
    fetch(`/user/${props.id}`).then(user => {
      setUser(user);
    });
  }, []);

  return user ? <div>Name: {user.name}</div> : <div>Loading...</div>;
}

export function Component2(props) {
  const [user, setUser] = useState();

  useEffect(() => {
    fetch(`/user/${props.id}`).then(user => {
      setUser(user);
      document.title = `User: ${user.name}`;
    });
  }, [props.id]);

  return user ? <div>Name: {user.name}</div> : <div>Loading...</div>;
}

export function Component3(props) {
  const [user, setUser] = useState();

  useEffect(async () => {
    let mounted = true;

    const user = await fetch(`/user/${props.id}`);

    if (mounted) {
      setUser(user);
      document.title = `User: ${user.name}`;
    }

    return () => {
      mounted = false;
      document.title = "";
    };
  }, [props.id]);

  return user ? <div>Name: {user.name}</div> : <div>Loading...</div>;
}

export function Component4(props) {
  const [user, setUser] = useState();

  function setUserData(user) {
    if (user) {
      setUser(user);
      document.title = `User: ${user.name} (${props.status})`;
    } else {
      document.title = "";
    }
  }

  useEffect(() => {
    let mounted = true;

    fetch(`/user/${props.id}`).then(user => {
      if (mounted) {
        setUserData(user);
      }
    });

    return () => {
      mounted = false;
      setUserData(undefined);
    };
  }, [props.id]);

  return user ? <div>Name: {user.name}</div> : <div>Loading...</div>;
}

export function Component5(props) {
  const [online, setOnline] = useState(true);

  useEffect(() => {
    document.addEventListener("online", () => {
      fetch("/notify-online-state");
      setOnline(true);
    });

    document.addEventListener("offline", () => {
      setOnline(false);
    });
  }, []);

  return <div>{online ? "On-line" : "Off-line"}</div>;
}

// 6 - Difference between useState vs useRef

// 7 - Difference between useCallback vs useMemo

// 8 - Why do we need the `key` property on JSX built from arrays