Frontend
You didn't have a system administrator who helped with access?
Have you used any agreement for writing commits?
What can you say about the provide/inject mechanism in Vue?
Mentally run the shown function: what will be printed on the first call and why? How to fix the code to get a sequence of numbers?
Can you attach a .then() to a .catch()?
Imagine you have unlimited resources and need to create an interface with a form from scratch as part of a large application. What stack and architecture would you choose?
How do you bind the context (this) to a function? Tell me about call, apply, bind methods and their differences.
Provide an example of the Open/Closed principle in frontend development, for example, through render props.
export const usePhoneMask = ({ mask, initialValue, maskPlaceholder, }: UsePhoneMaskParams): UsePhoneMaskReturn => { // code here };
How is an event emitted (called) outward from a component? What exactly do we write when emitting an event to the parent?
Can you tell me a little about the functionality of the administrative portal for passenger service agents at airports?
Have you worked on interface accessibility, and do you have experience in this?
What is Pinia and why is it used?
How would you describe the difference between Middle and Senior specifically in front-end development?
What do you do in your free time?
Why did you decide to use Proxy instead of Object.defineProperty?
If not NgRx, what would you use instead?
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.
Tell me about your favorite feature that you are proud of
Tell us about Teleport and Suspense in Vue.js: what are they, have you used them in your work?