Arrow functions y funciones de primera clase
Las arrow functions nos permiten definir funciones de una forma más compacta.
// funciones normales function sum(a, b) { return a + b; } // arrow function const sum = (a, b) => a + b; Lo que facilita definir funciones y pasarlas como argumentos en un solo paso
const nums = [1, 2, 3]; const squares = nums.map((n) => n * n); Para que una arrow function devuelva un objeto debemos ponerlo entre paréntesis
const merge = (obj1, obj2) => ({ ...obj1, ...obj2 }); Cuidado porque podemos crear funciones nuevas cuando no lo deseamos.
En el siguiente ejemplo el componente Screen pasa una nueva función a Button cada vez que Screen se re-renderiza.
Y esto provoca que cada vez que el usuario escribe una letra en Input se re-renderice Button
function Screen() { const [value, setValue] = useState(""); const [loading, setLoading] = useState(false); return ( <div> <Input value={value} onChange={setValue} /> <Button onclick={() => setLoading(true)} /> {/* ⛔️ */} </div> ); } React nos permite solucionarlo con el hook useCallback que mantiene la función siempre igual para esta instancia del componente Screen.
function Screen() { const [value, setValue] = useState(""); const [loading, setLoading] = useState(false); const activateLoading = useCallback(() => setLoading(true), [setLoading]); return ( <div> <Input value={value} onChange={setValue} /> <Button onclick={activateLoading} /> </div> ); } Además JavaScript tiene first-class functions. Eso significa que las funciones se tratan como una variable, pueden ser pasadas como argumento y devueltas en otras funciones.
Esto da lugar a algunos patrones interesantes:
Funciones que devuelven otras funciones (atención a la closure)
const logger = (module) => (msg) => console.log(`${module}: ${msg}`); const log = logger("BeneficiaryApi"); log("Requested Beneficiaries"); // "BeneficiaryApi: Requested Beneficiaries log("Beneficiaries request successful"); // "BeneficiaryApi: Beneficiaries request successful Podemos ahorrarnos crear funciones intermedias
const Wrapper = ({ value, onChange }) => ( <div> <Input value={value} onChange={(val) => onChange(val)} /> {/* ⛔️ */} </div> ); Puede ser escrita como
const Wrapper = ({ value, onChange }) => ( <div> <Input value={value} onChange={onChange} /> </div> ); O mejor incluso, ya que las props son las mismas
const Wrapper = (props) => ( <div> <Input {...props} /> </div> ); Currying
Consiste en utilizar closures para generar funciones que llaman a otras funciones con algunos parámetros fijos. Por ejemplo:
const User = ({userId, name, address}) => ( const update = (attr, value) => updateUser(userId, attr, value); <Input label="Name" value={name} onChange={val => update("name", val)} /> <Input label="Address" value={address} onChange={val => update("address", val)} /> ) 
Top comments (0)