useClosure

utility

Installation

npx usehooks-cli@latest add use-closure

Description

A React hook that provides utilities for creating and working with JavaScript closures. Closures are functions that have access to variables from their outer (enclosing) scope even after the outer function has returned. This hook demonstrates various closure patterns and provides practical utilities for managing private state, memoization, and encapsulation.

Return Type

UseClosureReturn

Property	Type	Description
createPrivateState	<T>(initialValue: T) => PrivateState<T>	Creates a closure with private state that can only be accessed through provided methods
createCounter	(initialValue?: number) => CounterClosure	Creates a classic counter closure with increment, decrement, and reset functionality
createMemoizer	<T, R>(fn: (...args: T) => R) => (...args: T) => R	Creates a memoization closure that caches function results
createModule	<T>(initialState: T, methods: Record<string, Function>) => Record<string, Function>	Creates a module pattern closure with private state and public methods
createEventEmitter	() => EventEmitterClosure	Creates an event emitter using closures for private listener management
createSecureState	<T>(initialValue: T, validator?: (value: T) => boolean) => SecureStateClosure<T>	Creates a secure state closure with validation and controlled access
demonstrateScope	() => ScopeDemo	Demonstrates how closures capture and maintain access to outer scope variables

Examples

Private State Management

Create private state that can only be modified through controlled methods

const { createPrivateState } = useClosure();

const privateCounter = createPrivateState(0);

// Only way to access the value
console.log(privateCounter.get()); // 0

// Controlled modification
privateCounter.set(prev => prev + 1);
console.log(privateCounter.get()); // 1

// Reset to initial value
privateCounter.reset();

Classic Counter Closure

Demonstrate the classic counter closure pattern

const { createCounter } = useClosure();

const counter = createCounter(10);

console.log(counter.increment()); // 11
console.log(counter.increment()); // 12
console.log(counter.decrement()); // 11
console.log(counter.getValue()); // 11
counter.reset(); // back to 10

Memoization with Closures

Create a memoized function using closures

const { createMemoizer } = useClosure();

const expensiveFunction = (n: number) => {
  console.log('Computing...');
  return n * n;
};

const memoized = createMemoizer(expensiveFunction);

console.log(memoized(5)); // Computing... 25
console.log(memoized(5)); // 25 (cached, no "Computing...")
console.log(memoized(3)); // Computing... 9

Module Pattern

Create a module with private state and public methods

const { createModule } = useClosure();

const userModule = createModule(
  { name: '', age: 0 },
  {
    setName: (state, name: string) => {
      state.name = name;
      return `Name set to ${name}`;
    },
    setAge: (state, age: number) => {
      if (age >= 0) {
        state.age = age;
        return `Age set to ${age}`;
      }
      return 'Invalid age';
    },
    getInfo: (state) => `${state.name}, ${state.age} years old`
  }
);

userModule.setName('John');
userModule.setAge(30);
console.log(userModule.getInfo()); // "John, 30 years old"

Event Emitter with Closures

Create an event emitter using closure-based private state

const { createEventEmitter } = useClosure();

const emitter = createEventEmitter();

// Subscribe to events
const unsubscribe = emitter.on('test', (data) => {
  console.log('Received:', data);
});

// Emit events
emitter.emit('test', 'Hello World!'); // Received: Hello World!

// Unsubscribe
unsubscribe();

Secure State with Validation

Create secure state with validation using closures

const { createSecureState } = useClosure();

const secureAge = createSecureState(
  25,
  (age: number) => age >= 0 && age <= 150
);

console.log(secureAge.read()); // 25
console.log(secureAge.write(30)); // true
console.log(secureAge.write(-5)); // false (invalid)
console.log(secureAge.read()); // 30 (unchanged from invalid write)

Scope Demonstration

Demonstrate how closures capture outer scope variables

const { demonstrateScope } = useClosure();

const scope = demonstrateScope();
console.log(scope.outerVar); // "I'm in the outer scope"

const innerFunction = scope.createInner('inner variable');
console.log(innerFunction()); 
// "I'm in the outer scope and inner variable (from inner scope)"

Dependencies

react

Notes

•Closures maintain access to outer scope variables even after the outer function returns
•This hook demonstrates various closure patterns: private state, counters, memoization, modules
•Closures are useful for data privacy, encapsulation, and creating specialized functions
•The module pattern uses closures to create objects with private state and public methods
•Memoization closures capture the cache in their scope for persistent storage
•Event emitters use closures to maintain private listener collections
•All created closures maintain their own independent scope and state

Implementation

"use client";

import { useCallback } from "react";

type ClosureFunction<T = any, R = any> = (...args: T[]) => R;
type ClosureFactory<T = any, R = any> = (
  ...outerArgs: any[]
) => ClosureFunction<T, R>;

interface PrivateState<T> {
  get: () => T;
  set: (value: T | ((prev: T) => T)) => void;
  reset: () => void;
}

interface UseClosureReturn {
  // Create a closure with private state
  createPrivateState: <T>(initialValue: T) => PrivateState<T>;

  // Create a counter closure (classic example)
  createCounter: (initialValue?: number) => {
    increment: () => number;
    decrement: () => number;
    getValue: () => number;
    reset: () => void;
  };

  // Create a memoization closure
  createMemoizer: <T extends any[], R>(
    fn: (...args: T) => R
  ) => (...args: T) => R;

  // Create a closure with multiple private variables
  createModule: <T extends Record<string, any>>(
    initialState: T,
    methods: Record<string, (state: T, ...args: any[]) => any>
  ) => Record<string, (...args: any[]) => any>;

  // Create a closure-based event emitter
  createEventEmitter: () => {
    on: (event: string, callback: Function) => () => void;
    emit: (event: string, ...args: any[]) => void;
    off: (event: string, callback?: Function) => void;
    getListeners: (event: string) => Function[];
  };

  // Create a closure with access control
  createSecureState: <T>(
    initialValue: T,
    validator?: (value: T) => boolean
  ) => {
    read: () => T;
    write: (value: T) => boolean;
    isValid: (value: T) => boolean;
  };

  // Utility to demonstrate closure scope
  demonstrateScope: () => {
    outerVar: string;
    createInner: (innerVar: string) => () => string;
  };
}

export function useClosure(): UseClosureReturn {
  const createPrivateState = useCallback(
    <T>(initialValue: T): PrivateState<T> => {
      let privateValue = initialValue;
      const originalValue = initialValue;

      return {
        get: () => privateValue,
        set: (value: T | ((prev: T) => T)) => {
          privateValue =
            typeof value === "function"
              ? (value as (prev: T) => T)(privateValue)
              : value;
        },
        reset: () => {
          privateValue = originalValue;
        },
      };
    },
    []
  );

  const createCounter = useCallback((initialValue: number = 0) => {
    let count = initialValue;
    const initial = initialValue;

    return {
      increment: () => ++count,
      decrement: () => --count,
      getValue: () => count,
      reset: () => {
        count = initial;
      },
    };
  }, []);

  const createMemoizer = useCallback(
    <T extends any[], R>(fn: (...args: T) => R) => {
      const cache = new Map<string, R>();

      return (...args: T): R => {
        const key = JSON.stringify(args);

        if (cache.has(key)) {
          return cache.get(key)!;
        }

        const result = fn(...args);
        cache.set(key, result);
        return result;
      };
    },
    []
  );

  const createModule = useCallback(
    <T extends Record<string, any>>(
      initialState: T,
      methods: Record<string, (state: T, ...args: any[]) => any>
    ) => {
      let state = { ...initialState };
      const publicMethods: Record<string, (...args: any[]) => any> = {};

      // Create public methods that have access to private state
      Object.keys(methods).forEach((methodName) => {
        publicMethods[methodName] = (...args: any[]) => {
          const method = methods[methodName];
          if (typeof method === "function") {
            return method(state, ...args);
          }
          throw new Error(`Method ${methodName} is not defined`);
        };
      });

      // Add state management methods
      publicMethods.getState = () => ({ ...state });
      publicMethods.setState = (newState: Partial<T>) => {
        state = { ...state, ...newState };
      };

      return publicMethods;
    },
    []
  );

  const createEventEmitter = useCallback(() => {
    const listeners = new Map<string, Set<Function>>();

    return {
      on: (event: string, callback: Function) => {
        if (!listeners.has(event)) {
          listeners.set(event, new Set());
        }
        listeners.get(event)!.add(callback);

        // Return unsubscribe function (closure over callback)
        return () => {
          listeners.get(event)?.delete(callback);
        };
      },

      emit: (event: string, ...args: any[]) => {
        const eventListeners = listeners.get(event);
        if (eventListeners) {
          eventListeners.forEach((callback) => callback(...args));
        }
      },

      off: (event: string, callback?: Function) => {
        if (callback) {
          listeners.get(event)?.delete(callback);
        } else {
          listeners.delete(event);
        }
      },

      getListeners: (event: string) => {
        return Array.from(listeners.get(event) || []);
      },
    };
  }, []);

  const createSecureState = useCallback(
    <T>(initialValue: T, validator?: (value: T) => boolean) => {
      let secureValue = initialValue;

      const isValid = (value: T): boolean => {
        return validator ? validator(value) : true;
      };

      return {
        read: () => secureValue,
        write: (value: T): boolean => {
          if (isValid(value)) {
            secureValue = value;
            return true;
          }
          return false;
        },
        isValid,
      };
    },
    []
  );

  const demonstrateScope = useCallback(() => {
    const outerVar = "I'm in the outer scope";

    return {
      outerVar,
      createInner: (innerVar: string) => {
        // This function closes over both outerVar and innerVar
        return () => `${outerVar} and ${innerVar} (from inner scope)`;
      },
    };
  }, []);

  return {
    createPrivateState,
    createCounter,
    createMemoizer,
    createModule,
    createEventEmitter,
    createSecureState,
    demonstrateScope,
  };
}

useWebShare

CLI Docs All Hooks

useDebounce