const func = obj.sayHi() const boundFuns = func.bind(obj) boundFuns() ------------------- const submit = (el) => () => { log(el); } arr.map(el => <button onClick={submit(el)}/>) const param = useMemo(() => a + b) return <Child value={param} />

Let's break it down:

1. const func = obj.sayHi() Here, the sayHi function of the obj object is called, and the result is assigned to func. If sayHi returns a function, then func is a function; otherwise, it's the result of the call.

2. const boundFuns = func.bind(obj) The bind method creates a new function with a fixed this context. If func is a function, then boundFuns is the same function but with this bound to obj.

3. boundFuns() Calling the function with the bound context.

---

4. const submit = (el) => () => { log(el); } This is a higher-order function that takes a parameter el and returns a function that logs el when called. It is used to pass handlers with parameters.

5. arr.map(el => <button onClick={submit(el)}/>) For each element in the array, a button is created with an onClick handler that captures the value of el through closure.

---

6. const param = useMemo(() => a + b) The React hook useMemo memoizes the result of a + b to avoid recalculating it on every render if a and b haven't changed.

7. return <Child value={param} /> Passing the computed value to a child component.

---

Summary:

• In the first example, it's important that bind fixes the this context for the function.
• In the second, closures allow creating handlers with parameters.
• In the third, useMemo optimizes performance by preventing unnecessary calculations and re-renders.