Разберём ещё один полезный утилити-тип — Awaited 🖼️. Он позволяет извлечь тип результата из промиса.

Что делает Awaited?
Awaited<T> возвращает тип, в который разрешается промис T.
Проще говоря — убирает Promise-обёртку и достаёт внутренний тип.

Пример:

async function fetchData(): Promise<string> {
  return "Строка с данными";
}

type ResultType = Awaited<ReturnType<typeof fetchData>>;
// Тип: string

Здесь мы комбинируем два утилити-типа — ReturnType (о котором я писал в этом посте) и Awaited.

Сначала ReturnType<typeof fetchData> даёт нам Promise<string>, а затем Awaited вытаскивает из него string.

#typescript

Одна из распространённых ошибок при работе с React — вызов хуков внутри условий, циклов или вложенных функций 🖼️

Пример кода с ошибкой:

function Component({ show }) {
  if (show) {
    useEffect(() => {
      console.log("Какой-то эффект");
    }, []);
  }

  return <div>Тут что-то интересное!</div>;
}

Ошибка: Invalid hook call

Исправление ошибки:

function Component({ show }) {
  useEffect(() => {
    if (show) {
      console.log("Какой-то эффект");
    }
  }, [show]);

  return <div>Тут что-то интересное!</div>;
}

Почему так происходит?
React запоминает порядок вызова хуков в компоненте и ожидает, что он всегда будет одинаковым. Если хук пропускается из-за условия, на следующем рендере React начинает привязывать хуки не к тем значениям.

Итог
Хуки должны вызываться всегда в одном порядке, без условий и вложенных блоков. Это базовое правило React, нарушение которого приводит к ошибкам в компонентах.

#react

На майские беру небольшой перерыв 😋
Советую и вам отложить всю технику и как следует отдохнуть!)

Напоминаю, что у нас есть чат — @TrueFrontenderChat.
В нём можно задавать вопросы, помогать другим и предлагать идеи для будущих постов 🐸

Хороших выходных!

Привет! Небольшая задача с собеседования и отправляемся отдыхать 🏠

У нас есть следующий код:

const o = {
  nameObject: "object o",
  printName(a, b, c) {
    console.log(this.nameObject);
  },
};

// 1
o.printName();

// 2
let print = o.printName;
print();

// 3
print.call(o);

// 4
print.bind(o).call({ nameObject: "call name" });

Вопросы:
1. Что будет выведено на каждом шаге при выполнении кода в strict mode и без него?
2. Почему вывод отличается в разных случаях?

Разбор:
1. Метод printName вызывается через объект o, и this указывает на сам объект o.

2. Метод printName присваивается переменной print и вызывается как обычная функция. Контекст this теряется, и в non-strict он указывает на глобальный объект (window), у которого нет свойства name. В strict моде this будет undefined, и попытка обращения к this.nameObject вызовет ошибку.

3. Метод call вызывает функцию с переданным контекстом. В данном случае, this указывает на объект o.

4. Метод bind создаёт новую функцию с привязанным контекстом o. После этого вызывается call, который пытается изменить контекст на новый объект, но bind уже установил контекст, и call не может его установить повторно.

Ответ:
1. "object o"
2. В non-strict: undefined. В strict: ошибка
3. "object o"
4. "object o"

#interview #JavaScript