React Frontend Developer

Question 1

Что такое call stack?

Accepted Answer

Call stack — это структура данных, которая хранит информацию о вызовах функций. JavaScript добавляет функции в стек при вызове и удаляет их после завершения. Код выполняется строго сверху вниз, по принципу LIFO. Call stack помогает отслеживать, какая функция выполняется в данный момент. Переполнение стека приводит к ошибке.

Question 2

Чем отличается TanStack Query от Redux с точки зрения управления серверным состоянием?

Accepted Answer

TanStack Query (React Query) специализируется на управлении серверным состоянием: кэшировании, синхронизации и обновлении данных с API. Redux — это универсальный менеджер состояний, который часто используют для клиентского состояния, но для серверного требует написания большого количества шаблонного кода (редьюсеры, экшены, thunks). TanStack Query автоматически обрабатывает кэш, фоновую перезагрузку и инвалидацию, а Redux оставляет это разработчику.

Question 3

Как организовать кэширование и инвалидацию данных при работе с TanStack Query?

Accepted Answer

TanStack Query автоматически кэширует данные запросов. Инвалидация выполняется через queryClient.invalidateQueries, что помечает кэш устаревшим и инициирует повторный запрос. Настройка staleTime и gcTime позволяет контролировать актуальность и время жизни кэша. Для оптимизации можно использовать optimistic updates и refetchOnWindowFocus.

Question 4

Как с помощью TanStack Query (React Query) организовать периодический опрос (polling) списка данных? Какие функции и параметры для этого используются?

Accepted Answer

Для polling в TanStack Query используется параметр refetchInterval в хуке useQuery. Он задает интервал в миллисекундах, через который данные автоматически перезапрашиваются. Также можно использовать refetchIntervalInBackground для опроса при неактивной вкладке. Функция refetch позволяет вручную запустить запрос.

Question 5

Расскажи про контекст наложения (stacking context) в CSS и почему элемент с большим z-index может оказаться ниже элемента с меньшим z-index?

Accepted Answer

Stacking context — это область в CSS, внутри которой элементы упорядочиваются по z-index относительно друг друга. Если элемент создаёт свой контекст наложения (например, через position + z-index, opacity или transform), его дочерние элементы не могут выйти за пределы этого контекста. Поэтому элемент с большим z-index внутри одного контекста может оказаться ниже элемента с меньшим z-index из другого контекста, если родительский контекст расположен ниже.

Question 6

Как можно искусственно вызвать переполнение стека вызовов (stack overflow)?

Accepted Answer

Переполнение стека вызовов возникает, когда функция вызывает саму себя без условия выхода, создавая бесконечную рекурсию. Каждый вызов добавляет новый кадр в стек, и когда стек заполняется, движок JavaScript выбрасывает ошибку RangeError. Чтобы избежать этого, нужно всегда задавать базовый случай и следить за глубиной рекурсии.

Вопросы React Frontend Developer