Frontend

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]} />; --- The conversation on the right side discusses: - Using TypeScript with generics: "<T extends object, K extends keyof T>" - Checking if data is a string with a type guard: "isString(data: unknown): data is string { ... }" - Using useState with a function to avoid re-running on every render: ``` const [state, setState] = useState(getComplexData); // or const [state, setState] = useState(() => getComplexData()); ``` - The function passed to useState will run only once on component mount. - Warning about mutating state directly on line 11 with prev.concat. --- The technical task is to analyze and possibly fix or optimize the React component code, especially focusing on: - Proper lazy initialization of state with useState. - Avoiding direct mutation of state. - Understanding TypeScript generics and type guards. - Ensuring the component updates state correctly on button click.

Middle+

IT One

Зачем использовать TypeScript? Какие ключевые плюсы TypeScript?

Расскажи, для чего нужны порталы в React?

Как объявить новый тип на основе Foo, но без полей a и c, не используя Omit?

Какими принципами ты руководствуешься при проектировании архитектуры и выборе технологий?

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

Как компонент узнает, в какой среде (проекте) он находится и какую бизнес-логику использовать?

В чём разница между useMemo и React.memo? Можно ли заставить компонент, обёрнутый в React.memo, не перерендериваться, даже если пропсы изменились?

Есть два endpoint'а: получение списка пользователей и получение пользователя по ID. Как ты организуешь типизацию ответов и работу с этими API?

Какие способы обработки ошибок в JavaScript существуют?

Расскажите про CORS: для чего нужен, какие заголовки используются?

Middle

ОТП Банк

What backend experience do you have?

/** * @param {Array} iterable * @return {Promise<Array>} */ function promiseAll(iterable) {} // Resolved example. const p0 = Promise.resolve(3); const p1 = 42; const p2 = new Promise((resolve, reject) => { setTimeout(() => { resolve('foo'); }, 100); }); promiseAll([p0, p1, p2]).then(console.log); // [3, 42, 'foo']

В чём различие между interface и type в TypeScript? Когда использовать каждый из них?

Можешь рассказать подробнее, для какой цели вы внедрили микрофронтенды?

Middle

Лига Цифровой Экономики

// === 2 === // implement type type User = any;

Расскажи про уровни специфичности (каскад) в CSS.

Как происходил релиз и версионирование?

Как работать с асинхронным JavaScript? В чём разница между Promise и async/await?

Есть ли опыт работы с MCP Playwright? Что такое MCP?