Frontend собеседования

🔴Чтобы предотвратить ненужные повторные рендеры компонента, можно использовать React.memo для функциональных компонентов или PureComponent для классовых. Эти инструменты позволяют избежать рендера, если пропсы и состояние не изменились.

const MyComponent = React.memo(({ prop1, prop2 }) => {
  return <div>{prop1} {prop2}</div>;
});

Для более сложных случаев можно использовать хук useMemo, чтобы мемоизировать вычисляемые значения, и useCallback, чтобы сохранить ссылки на функции между рендерами. Это уменьшает количество повторных вычислений и рендеров.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

▶️Hoisting (поднятие) — это механизм, при котором объявления переменных и функций перемещаются вверх своей области видимости перед выполнением кода. Это позволяет использовать переменные и функции до их фактического объявления в коде.

Пример с переменными:

console.log(x); // undefined
var x = 5;

- Переменные, объявленные через var, поднимаются, но их значение инициализируется как undefined.

Пример с функциями:

foo(); // "Hello"
function foo() {
    console.log("Hello");
}

- Объявления функций поднимаются полностью, поэтому их можно вызывать до объявления.

Hoisting не применяется к let и const, которые остаются в "временной мертвой зоне" до объявления.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

✔️ Тип never в TypeScript обозначает значение, которое никогда не должно возникать. Он используется в ситуациях, когда функция не завершается нормально или когда переменная не может иметь значения.

Функция, которая всегда выбрасывает ошибку или содержит бесконечный цикл, возвращает never:

function throwError(message: string): never {
  throw new Error(message);
}  

Также never полезен в exhaustive checks для обработки всех вариантов union-типа:

type Shape = 'circle' | 'square';
function handleShape(shape: Shape) {
  switch (shape) {
    case 'circle': return;
    case 'square': return;
    default: const _exhaustiveCheck: never = shape; // Ошибка, если Shape расширится
  }
}

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🔹Тег <noscript> используется для отображения контента, если JavaScript отключен в браузере. Он позволяет предоставить альтернативное содержимое или сообщение для пользователей, которые не могут или не хотят использовать JavaScript.

Пример:

<noscript>
  <p>Please enable JavaScript to use this website.</p>
</noscript>

- Контент внутри <noscript> отображается только при отключенном JavaScript.
- Часто используется для информирования пользователей или предоставления базовой функциональности без JavaScript.

✔️ Тип never в TypeScript обозначает значение, которое никогда не должно возникать. Он используется в ситуациях, когда функция не завершается нормально или когда переменная не может иметь значения.

Функция, которая всегда выбрасывает ошибку или содержит бесконечный цикл, возвращает never:

function throwError(message: string): never {
  throw new Error(message);
}  

Также never полезен в exhaustive checks для обработки всех вариантов union-типа:

type Shape = 'circle' | 'square';
function handleShape(shape: Shape) {
  switch (shape) {
    case 'circle': return;
    case 'square': return;
    default: const _exhaustiveCheck: never = shape; // Ошибка, если Shape расширится
  }
}