Ai avut vreodată experiența de a lucra fără un analist, atunci când trebuia să înțelegi singur sarcina?
Frontend
Ce este WeakMap?
Cum înțelegi ce este renderizarea în React? De ce poate să se întâmple?
import React, { useState, useEffect, useRef, useContext, useReducer, useMemo } from 'react'; export default Effects = () => { const [count, setCount] = useState(0); useLayoutEffect(() => console.log("fiecare randare 1")); console.log("fiecare randare 2"); useEffect(() => console.log("fiecare randare 3")); return ( <> <button onClick={() => setCount((prevProps) => ++prevProps)}> Incrementare </button> </> ) }
Ce setări au cookie-urile (httpOnly, secure, expires, domain, path)?
const { foo: bar, bar: foo } = { foo: 1, bar: 2 } console.log(bar) // console.log(foo) //
const createCounter = () => {
Vorbește-mi despre Event Loop: cum funcționează, ce sunt microtask-urile și macrotask-urile?
const obj = [{ value: 1, elems: [ { value: 2, elems: [ { value: 3 }, { value: 6 }, ... ] }, { value: 4, elems: [ { value: 5, elems: [ { value: 6 }, ... ]} ] } ] }] ------------- setTimeout(() => { console.log(1); }, 0); const p = new Promise(resolve => { console.log(2); resolve(); }); p.then(() => { console.log(3) }).then(() => { console.log(4); }); console.log(5);
import { useState, useRef, useEffect } from "react"; const useDebugRender = ({props}) => { const prevProp = useRef(props) useEffect(() => { }, []) } const ParentComponent = () => { const [random, setRandom] = useState(0); // Se transmite ca Prop către componenta copil const [text, setText] = useState(""); // Se transmite ca Prop către componenta copil const createRandom = () => setRandom(Math.floor(Math.random() * 100)); const onTextChange = (e) => setText(e.target.value); const [count, setCount] = useState(0); const incrementCount = () => setCount((prev) => prev + 1); // Această funcție se transmite ca Prop către componenta copil return ( <> <Count: {count} /> <input type="text" onChange={onTextChange} /> <button onClick={createRandom}>Generează aleatoriu</button> <div> <ChildComponent random={random} text={text} incrementCount={incrementCount} /> </div> </> ); }; export default ParentComponent;
Cum compară React props-urile? Cum funcționează comparația superficială?
La ce folosește useRef? Care sunt aplicațiile sale?
De ce debounce și nu throttle pentru căutare?
const { foo: bar, bar: foo } = { foo: 1, bar: 2 }; //foo //bar setTimeout(() => { console.log("timeOut"); }, 0); console.log(1); new Promise((resolve) => { console.log("Promise"); setTimeout(() => { console.log("timeOut2"); resolve(); }, 0); }) .then(() => { console.log("then1"); }) .then(() => { console.log("then2"); }); console.log(4); setTimeout(() => { console.log("timeOut3"); }, 0);
const submit = useCallback((el) => () => { log(el); }, []); arr.map(el => <button onClick={submit(el)} />) arr.map(el => <SomeComp key={} onClick={() => submit(el)} />) const param = useMemo(() => ({c: a + b}), [a,b]) return <Child value={param} /> Child = React.memo(() => {})
Dacă componenta părinte transmite un nou array ca props, vei vedea noile date pe ecran sau cele vechi? De ce?
Tipifică funcția getParam astfel încât TypeScript să evidențieze automat existența proprietăților în obiect. Fă în așa fel încât tipizarea să împiedice transmiterea de array-uri.
const Effects = () => { const [count, setCount] = useState(0); useLayoutEffect(() => console.log("fiecare randare 1")); console.log("fiecare randare 2"); useEffect(() => console.log("fiecare randare 3")); return ( <> {count} <button onClick={() => setCount((prevProps) => ++prevProps)}> Incrementare </button> </> ); }; export default Effects; // 1 randare: // După clic: const Effects = () => { const [count, setCount] = useState(0); const [number, setNumber] = useState(0); useEffect(() => { console.log(count); return () => { console.log(count); }; }); return ( <> {count} <button onClick={() => setCount((prevProps) => ++prevProps)}> Incrementare </button> </> ); }; export default Effects; // 1 randare: // 2 1 3 // După clic: // 2 1 3 // return null: // 2 1 3 // // 1: 1, 0 // +: 1, 2 // ++: 2, 2
Care este diferența dintre await p1, await p2 și Promise.all([p1, p2])?
let obj = { a: 1 }; let array = [obj]; obj = null; console.log(obj); // console.log(array); //