Задачи с реальных собеседований на Frontend Developer

import ReactDOM from "react-dom";
import React, { memo, StrictMode, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";

/* --------------------------------------------------------- */

const heavyFunc = (n)=>{
    return Math.floor(Math.random() * n)
}

const LazyInit = ({ num })=>{
    const [count, setCount] = useState(heavyFunc(num));

    return (
        <>
            {count}
            <button onClick={()=>setCount((prevCount) => prevCount-1)}>
                Decrement
            </button>
        </>
    )
}

/* --------------------------------------------------------- */

function App() {
    return (
        <div className="App">
            <h1>Hello LeetCoder</h1>
        </div>
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
    <StrictMode>
        <App />
    </StrictMode>,
    rootElement
);

import ReactDOM from "react-dom";
import React, { memo, StrictMode, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";

/* -------------------------------------------- */

function Clicker() {
    const [clicks, setClicks] = useState(0);

    const onClick = () => {
        setTimeout(() => {
            setClicks(clicks + 1);
        }, 2000);
    };

    return (
        <>
            {clicks}
            <button onClick={onClick}>
                Increment
            </button>
        </>
    );
}

/* -------------------------------------------- */

function App() {
    return (
        <div className="App">
            <h1>Hello LeetCoder</h1>
        </div>
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
    <StrictMode>
        <App />
    </StrictMode>,
    rootElement
);

const X = { a: 1, b: 2, c: 3, d: 4 }

function getProperty(obj, key){
    return obj[key];
}

getProperty(X, 'a');
getProperty(X, 'm'); // Argument of type '"m"' is not assignable to parameter of type '"a" | "b" | "c" | "d"'
getProperty({ asd: 123 }, 'a'); // Argument of type '"a"' is not assignable to parameter of type '"asd"'

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); // заглушка

const someMethod = (nums) => {
    const results = [];
    nums.forEach(async (el) => {
        await sleep(500) // ждем какой-то асинк метод (на практике был бы запрос к серверу)
        results.push(el * 2);
    });
    return results;
}

const start = () => {
    const results = someMethod([1,2,3]);
    console.log(results);
}

// start();

setTimeout(()=>{
    console.log("timeOut");
}, 0)

console.log(1);

new Promise(resolve => {
    console.log("Promise");
    setTimeout(()=>{
        console.log("777");
        resolve()
    },0)
}).then(() => {
    console.log("then1");
}).then(() => {
    console.log("then2");
})

console.log(4);

setTimeout(()=>{
    console.log("timeOut2");
},0)

const fn = (x) => {
    return () => {
        console.log(x);
    }
}

fn(5)();

// К массиву применяется метод findUnique, который возвращает новый массив из уникальных элементов,
// то есть тех, которые в исходном массиве присутствуют всего один раз.
// Необходимо реализовать метод findUnique так, что бы он работал как обычный метод массива.
// Порядок следования имеет значение.

[10, 5, 10, 0, 10, 6, 6, 7, 2, 9, 9].findUnique(); // => [5, 0, 7, 2]

const MyPromise = () => {
    // code
}

const value = 1

const prom = new MyPromise((resolve, reject) => {
    if(value === 1){
        resolve(value)
        return
    }
    reject(value)
})

prom.then((res) => {
    console.log(res)
    return 2
}).then((res) => {
    console.log(res)
}).catch((err) => {
    console.error(err)
})

import React, { useState } from "react";

export default function Two() {
    const [count, setCount] = useState(0);
    const [doubleCount, setDoubleCount] = useState(count * 2);
    const handleCount = () => {
        setCount(count + 1);
        setDoubleCount(count * 2);
    };
    return (
        <div className="App">
            <div>
                <h2>Count Without useEffect</h2>
                <h3>Count: {count}</h3>
                <h3>Count * 2: {doubleCount}</h3>
                <button onClick={handleCount}>Count++</button>
            </div>
        </div>
    );
}

// 3. Какой будет результат у вызова sayHi?
"use strict";
let phrase = "Hello";
if (true) {
    let user = "John";

    function sayHi() {
        console.log(phrase, user);
    }
}

sayHi();