import React, { useState, useEffect, useRef, useContext, useReducer, useMemo } from 'react'; export default Effects = () => { const [count, setCount] = useState(0); useLayoutEffect(() => console.log("cada renderizado 1")); console.log("cada renderizado 2"); useEffect(() => console.log("cada renderizado 3")); return ( <> <button onClick={() => setCount((prevProps) => ++prevProps)}> Incrementar </button> </> ) }
¿Has tenido alguna experiencia trabajando sin un analista, cuando necesitabas entender la tarea por ti mismo?
¿Cómo entiendes qué es el renderizado en React? ¿Por qué puede ocurrir?
¿Qué es WeakMap?
¿Qué configuraciones tienen las cookies (httpOnly, secure, expires, domain, path)?
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);
const createCounter = () => {
const { foo: bar, bar: foo } = { foo: 1, bar: 2 } console.log(bar) // console.log(foo) //
Cuéntame sobre el Event Loop: cómo funciona, qué son las microtareas y las macrotareas?
¿Cómo compara React las props? ¿Cómo funciona la comparación superficial?
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);
¿Para qué sirve useRef? ¿Cuáles son sus aplicaciones?
const Effects = () => { const [count, setCount] = useState(0); useLayoutEffect(() => console.log("cada render 1")); console.log("cada render 2"); useEffect(() => console.log("cada render 3")); return ( <> {count} <button onClick={() => setCount((prevProps) => ++prevProps)}> Incrementar </button> </> ); }; export default Effects; // 1 render: // Después de hacer 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)}> Incrementar </button> </> ); }; export default Effects; // 1 render: // 2 1 3 // Después de hacer clic: // 2 1 3 // return null: // 2 1 3 // // 1: 1, 0 // +: 1, 2 // ++: 2, 2
import { useState, useRef, useEffect } from "react"; const useDebugRender = ({props}) => { const prevProp = useRef(props) useEffect(() => { }, []) } const ParentComponent = () => { const [random, setRandom] = useState(0); // Se pasa al componente hijo como Prop const [text, setText] = useState(""); // Se pasa al componente hijo como Prop 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); // Esta función se pasa como Prop al componente hijo return ( <> <Count: {count} /> <input type="text" onChange={onTextChange} /> <button onClick={createRandom}>Generar aleatorio</button> <div> <ChildComponent random={random} text={text} incrementCount={incrementCount} /> </div> </> ); }; export default ParentComponent;
Tipifica la función getParam para que TypeScript resalte automáticamente la existencia de propiedades en el objeto. Haz que la tipificación impida pasar arrays.
¿Por qué debounce y no throttle para la búsqueda?
Si el componente padre pasa un nuevo array como props, ¿verás los datos nuevos en la pantalla o los antiguos? ¿Por qué?
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(() => {})
let obj = { a: 1 }; let array = [obj]; obj = null; console.log(obj); // console.log(array); //
¿Cuál es la diferencia entre await p1, await p2 y Promise.all([p1, p2])?
