🖥 Задачи с собеседования в ВК

А вот и задачи подъехали

Какой порядок вывода будет?

requestAnimationFrame(() => {
    console.log(0);
});
setTimeout(
    () => console.log(1),
    0
);
Promise.resolve().then(
    () => console.log(2)
);
new Promise((resolve, reject) => {
    console.log(3);

    resolve();
    reject();
}).then(
    () => {
        console.log(4);
        throw 5;
    }
).then(() => {
    console.log(6);
}, () => {
    console.log(7);
}).catch(() => {
    console.log(8);
}).then(() => {
    console.log(9);
});
Promise.resolve().then(
    () => console.log(10)
);
console.log(11);

Отрефактори код:

function App({ userId }) {
  const [user, setUser] = useState(null);

  const processUser = (user) => {
    return {
      ...user,
      friendIds: user.friends.reduce((acc, friend) => [...acc, friend.id])
    };
  };

  useEffect(() => {
    fetch(`https://api.vk.com/method/users.get?userId=${userId}`).then((response) => {
      setUser(processUser(response));

      if (user.status === "inactive") {
        const { toast } = useToast();

        toast("Пользователь неактивен.");
      }
    });
  }, [userId, processUser, setUser]);

  if (user?.status === "active") {
    const userIsOnline = useUserOnline(userId);
    if (userIsOnline) {
      const { toast } = useToast();

      toast("Пользователь в сети");
    }
  }

  return (
    <div>
      {user.friendIds.map((friendId) => {
        return <li>{friendId}</li>;
      })}
    </div>
  );
}

Доп. вопросы:
• Что делает этот код?
• Какие проблемы в нём есть?
• Какие ошибки возможны?
• Что не так с массивом зависимостей useEffect?
• Какая cleanup-функция должна быть?
• Почему processUser может работать некорректно?
• Что будет без response.json()?
• Что произойдёт, если user === null?
• Какая ошибка возникнет, если вместо массива придёт null?
• Поможет ли значение по умолчанию [] избежать падения приложения?

🚀 База собесов — 💪 Frontend Элита — 📚 Менторство — 📹 YouTube