Frontend

let obj = { a: 1 }; let array = [obj]; obj = null; console.log(obj); // console.log(array); //

Middle+

IT One

Scrivi una funzione getUserProfile che prende un userId come argomento e recupera il profilo utente dall'endpoint API "[link] La funzione dovrebbe registrare il profilo utente se il fetch ha successo, e registrare un messaggio di errore se il fetch fallisce.

Middle+

IT One

import React, { useState, useEffect, useLayoutEffect } from 'react'; export default () => { const [count, setCount] = useState(0); useLayoutEffect(() => console.log("ogni render 1")); console.log("ogni render 2"); useEffect(() => console.log("ogni render 3")); return ( <button onClick={() => setCount((prevProps) => ++prevProps)}> Incrementa </button> ); } // montaggio -> ogni render 2, ogni render 1, ogni render 3 // aggiornamento -> ogni render 2, ogni render 1, ogni render 3 // smontaggio 4

Middle+

IT One

Cos'è un Set? Cosa possiamo passare come argomento quando chiamiamo new Set?

Middle+

IT One

Let e const (hoisting) vengono sollevati? Cosa succede quando si accede a loro prima della dichiarazione?

Middle+

IT One

Scrivi cosa succederà al primo rendering — in quale ordine verranno visualizzati i console.log. Cosa succederà dopo aver cliccato?

Middle+

IT One

const S = { id: 1, name: "Ivan", age: "39", tel: [phone] }; function getParam(obj, key) { return obj[key]; } getParam(S, "tel"); getParam(S, "job");

Middle+

IT One

Scrivi un'implementazione astratta del componente Child con memoizzazione tramite React.memo. Qual è il secondo argomento che React.memo accetta?

Middle+

IT One

Cos'è un WeakSet?

Middle+

IT One

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]} />; --- La conversazione sulla destra discute: - Uso di TypeScript con generici: "<T extends object, K extends keyof T>" - Verifica se i dati sono una stringa con un guardiano di tipo: "isString(data: unknown): data is string { ... }" - Uso di useState con una funzione per evitare di rieseguire ad ogni render: ``` const [state, setState] = useState(getComplexData); // o const [state, setState] = useState(() => getComplexData()); ``` - La funzione passata a useState verrà eseguita solo una volta al montaggio del componente. - Avvertimento sulla mutazione diretta dello stato alla riga 11 con prev.concat. --- Il compito tecnico è analizzare e possibilmente correggere o ottimizzare il codice del componente React, concentrandosi in particolare su: - La corretta inizializzazione pigra dello stato con useState. - Evitare la mutazione diretta dello stato. - Comprendere i generici di TypeScript e i guardiani di tipo. - Assicurarsi che il componente aggiorni correttamente lo stato al clic del pulsante.

Middle+

IT One

Cos'è una closure?

Middle+

IT One

Ci sono tre fonti di dati che restituiscono le stesse informazioni. Come ottenere la risposta dalla più veloce?

Middle+

IT One

Qual è la differenza tra Map e WeakMap?

Middle+

IT One

Parlami del hook useState in React.

Middle+

IT One

Perché le funzioni freccia non possono essere utilizzate con il costruttore new?

Middle+

IT One

Come si creano le funzioni in JavaScript? Quali sono i metodi per creare funzioni e in cosa si differenziano?

Middle+

IT One

Quali tipi utilitaristici di TypeScript usi nel tuo lavoro? Parla di Record, Pick, Omit, Partial, Required, Parameters, Exclude, Extract.

Middle+

IT One