The `deferCall` utility is a higher-order function that defers the execution of a given function until the returned function is called. It supports synchronous and asynchronous functions.
npm install just-defer-call``typescript`
// Use this
onClick={deferCall(fn, ⭐, 🔥, 🚀)}
// Instead of this
onClick={() => fn(😭, 😢,😞)}
DocumentationThe deferCall utility is a higher-order function that defers the execution of a given function until the returned function is called. It supports synchronous and asynchronous functions.
shell
yarn add just-defer-call
or
npm i just-defer-call
`Usage
$3
typescript
export const deferCall =
(
fn: (...args: Args) => T | Promise,
...args: Args
): (() => T | Promise) =>
(): T | Promise => {
return fn(...args);
};
`$3
- : The function to be deferred. It can be synchronous or asynchronous.
- args: The arguments to pass to fn when the deferred function is executed.$3
A new function that, when called, invokes the original function fn with the provided arguments and returns the result of original fn.---
Examples
$3
`javascript
import { deferCall } from "just-defer-call";function greet(name) {
console.log(
Hello, ${name}!);
}const deferredGreet = deferCall(greet, 'Alice');
// Function execution is deferred
deferredGreet(); // Logs: "Hello, Alice!"
`$3
javascript
import { deferCall } from "just-defer-call";function max(...args) {
console.log(
Max is: ${Math.max.apply(null, args)}!);
}const deferredMax = deferCall(max, 1, 2, 5, 4, 3);
// Function execution is deferred
deferredMax(); // Logs: "Max is: 5!"
`$3
js
import { deferCall } from "just-defer-call";function onClickHandler(buttonIndex) {
alert(
Pressed button index: ${buttonIndex});
}document.querySelectorAll("button").forEach((element, index) => {
element.addEventListener('click', deferCall(onClickHandler, index));
});
`$3
typescript
import { deferCall } from "just-defer-call";function add(a: number, b: number): number {
return a + b;
}
const deferredAdd = deferCall(add, 5, 10);
// Function execution is deferred
console.log(deferredAdd()); // Logs: 15
async function fetchData(url: string): Promise {
const response = await fetch(url);
return response.text();
}
const deferredFetch = deferCall(fetchData, 'https://api.example.com');
// Deferred execution of async function
deferredFetch().then(data => console.log(data));
`$3
tsx
import React, { useState } from 'react';import { deferCall } from "just-defer-call";
function App() {
const [count, setCount] = useState(0);
const increment = (value: number) => {
setCount((prev) => prev + value);
};
return (
Count: {count}
);
}export default App;
`---
Notes
- If is asynchronous, the returned function also returns a promise. Make sure to handle it appropriately.
- Useful for event handling, lazy evaluations, or deferring expensive computations.---
Testing
$3
`typescript
function sum(a: number, b: number): number {
return a + b;
}async function stupidFunction(value: number): Promise {
void 1;
return value;
}
describe("deferCall", () => {
test("deferCall should defer a synchronous function", () => {
const mockFn = jest.fn(sum);
const deferred = deferCall(mockFn, 2, 3);
expect(mockFn).not.toHaveBeenCalled();
deferred();
expect(mockFn).toHaveBeenCalledWith(2, 3);
});
test("deferCall should defer an asynchronous function", async () => {
const mockFn = jest.fn(stupidFunction);
const deferred = deferCall(mockFn, 42);
expect(mockFn).not.toHaveBeenCalled();
await deferred();
expect(mockFn).toHaveBeenCalledWith(42);
});
test("use deferCall with real function", async () => {
const value1 = Math.random();
const value2 = Math.random();
const valuesSum = value1 + value2;
const deferred = deferCall(sum, value1, value2);
expect(deferred()).toEqual(valuesSum);
});
test("use deferCall with real async function", async () => {
const value = Math.random();
const deferred = deferCall(stupidFunction, value);
expect(await deferred()).toEqual(value);
});
});
``