Heb je ooit ervaring gehad met werken zonder een analist, toen je de taak zelf moest begrijpen?
Frontend
Wat is WeakMap?
import React, { useState, useEffect, useRef, useContext, useReducer, useMemo } from 'react'; export default Effects = () => { const [count, setCount] = useState(0); useLayoutEffect(() => console.log("elke rendering 1")); console.log("elke rendering 2"); useEffect(() => console.log("elke rendering 3")); return ( <> <button onClick={() => setCount((prevProps) => ++prevProps)}> Incrementeren </button> </> ) }
Hoe begrijp je wat renderen in React is? Waar kan het door veroorzaakt worden?
Welke instellingen zijn er bij cookies (httpOnly, secure, expires, domain, path)?
const { foo: bar, bar: foo } = { foo: 1, bar: 2 } console.log(bar) // console.log(foo) //
const createCounter = () => {
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);
Vertel me over de Event Loop: hoe werkt het, wat zijn microtaken en macro-taken?
import { useState, useRef, useEffect } from "react"; const useDebugRender = ({props}) => { const prevProp = useRef(props) useEffect(() => { }, []) } const ParentComponent = () => { const [random, setRandom] = useState(0); // Wordt als Prop doorgegeven aan het kindcomponent const [text, setText] = useState(""); // Wordt als Prop doorgegeven aan het kindcomponent 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); // Deze functie wordt als Prop doorgegeven aan het kindcomponent return ( <> <Count: {count} /> <input type="text" onChange={onTextChange} /> <button onClick={createRandom}>Willekeurig genereren</button> <div> <ChildComponent random={random} text={text} incrementCount={incrementCount} /> </div> </> ); }; export default ParentComponent;
Hoe vergelijkt React de props? Hoe werkt de oppervlakkelijke vergelijking?
Waarvoor is useRef nodig? Wat zijn de toepassingen ervan?
Waarom debounce en niet throttle voor zoeken?
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(() => {})
Als de oudercomponent een nieuwe array als props doorgeeft, zie je dan de nieuwe gegevens op het scherm of de oude? Waarom?
Typeer de functie getParam zo dat TypeScript automatisch de aanwezigheid van eigenschappen in het object benadrukt. Zorg dat de type-aanduiding het doorgeven van arrays verhindert.
const Effects = () => { const [count, setCount] = useState(0); useLayoutEffect(() => console.log("elke render 1")); console.log("elke render 2"); useEffect(() => console.log("elke render 3")); return ( <> {count} <button onClick={() => setCount((prevProps) => ++prevProps)}> Incrementeren </button> </> ); }; export default Effects; // 1e render: // Na klik: 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)}> Incrementeren </button> </> ); }; export default Effects; // 1e render: // 2 1 3 // Na klik: // 2 1 3 // null teruggeven: // 2 1 3 // // 1: 1, 0 // +: 1, 2 // ++: 2, 2
Wat is het verschil tussen await p1, await p2 en Promise.all([p1, p2])?
let obj = { a: 1 }; let array = [obj]; obj = null; console.log(obj); // console.log(array); //