Frontend

Допустим, залетает новый тип варианта ответа (например, видео) — как это учесть в структуре данных, которую мы заложили?

Middle+

Okko

Что ты знаешь о React 19? Какие изменения были относительно React 18?

Ссылочные типы данных и примитивы в JavaScript: чем отличаются, перечисли каждый.

Middle

Рунити

Если бы не NgRx, что бы использовали вместо него?

import React, { useState, useEffect, useRef, useContext, useReducer, useMemo } from 'react'; const someFunc = (arr) => { return [...arr].sort((a, b) => a - b); }; const LazyInit = (props) => { const [arr, setArr] = useState(() => someFunc(props.arr)); const onClick = () => { setArr((prev) => prev.concat(prev.length + 1)) } return ( <> <button onClick={onClick}> Increment </button> <ul> {arr.map((n, index) => <li key={index}>{n}</li>)} </ul> </> ) } export default () => <LazyInit arr={[1, 2, 3]} />; --- Обсуждение справа касается: - Использования TypeScript с обобщениями: "<T extends object, K extends keyof T>" - Проверки, является ли данные строкой, с помощью type guard: "isString(data: unknown): data is string { ... }" - Использования useState с функцией для избегания повторного выполнения при каждом рендере: ``` const [state, setState] = useState(getComplexData); // или const [state, setState] = useState(() => getComplexData()); ``` - Функция, передаваемая в useState, выполнится только один раз при монтировании компонента. - Предупреждение о мутации состояния напрямую на строке 11 с помощью prev.concat. --- Техническое задание — проанализировать и, возможно, исправить или оптимизировать код React-компонента, особенно сосредоточившись на: - Правильной ленивой инициализации состояния с помощью useState. - Избегании прямой мутации состояния. - Понимании обобщений TypeScript и type guards. - Обеспечении правильного обновления состояния компонента при клике на кнопку.

Middle+

IT One

function createEmitter() { const events = new Map(); function on(event, handler) { if(!events.has(event)) { events.set(event, [handler]) return } events.get(event).push(handler) } function off(event, handler) { // TODO: удалить handler } function emit(event, payload) { // TODO: вызвать всех подписчиков event } return { on, off, emit }; } const bus = createEmitter(); const unsub1 = bus.on("order:created", (payload) => { console.log("handler1:", payload.id); }); const handler2 = (payload) => { console.log("handler2:", payload.id); } bus.on("order:created", handler2);

Почему debounce, а не throttle для поиска?

Middle+

IT One

Как у тебя дела с TypeScript? Есть тип Foo с полями a: string, b: number, c: null, d: boolean. Нужно сделать тип FooKeys на основе Foo, чтобы в нём были все ключи из Foo.

Какие проблемы безопасности вы видите в передаче логина и пароля через query-параметры в URL?

Есть массив из тысячи объектов (пользователей с числовым ID), объекты не упорядочены. Какая будет сложность алгоритма поиска по этому массиву?

Приходилось ли работать с авторизацией? Расскажите подробнее про реализацию.

Как долго вы работали с Angular?

Задание: реализовать форму логина на React. Требования: - два поля: email + password - controlled inputs - сабмит формы с preventDefault - базовая валидация (поле не пустое) - по отправке выполнить async запрос (можно имитировать через setTimeout) - показать состояние loading (кнопка disabled) - показать ошибку при неуспешном логине Дополнительно (необязательно): - валидация email

Не против ли вы заниматься фуллстеком?

Когда пользователь вводит google.com в браузере, какой первый HTTP-запрос уходит на сервер и каким методом?

Когда срабатывает cleanup-функция в useEffect?

Где на практике со стороны пользователя можно встретить бесконечный Promise? (подсказка: связано с веб-конференциями, запрос доступа к камере и микрофону через navigator.mediaDevices.getUserMedia)

Если бросить ref-ссылку на классовый компонент, то значением ref будет instance класса. Можно ли сделать нечто подобное с функциональным компонентом — передать ref и получить в нём, например, функцию, объявленную внутри компонента?

Middle

СБЕР

Что такое горизонтальное масштабирование и как оно применялось?

/** * Реализовать функцию-обертку runOnce, которая принимает * функцию и возвращает новую функцию. Новая функция * может быть вызвана только один раз, все последующие * вызовы возвращают undefined. * * Оборачиваемая функция может принимать аргументы * и возвращать результат. */ function runOnce(fn) { // your code } const logHello = (name) => { console.log(`hello, ${name}!`) }; const logHelloOnce = runOnce(logHello); console.clear(); logHelloOnce('Oleg'); // 'hello, Oleg!' logHelloOnce('Olga'); // undefined