Наведіть приклад функції з мемоізацією. Коли варто застосовувати цю техніку?

Повне пояснення

Що це і навіщо Мемоізація зберігає результати функції у кеші, що дозволяє швидко повернути значення при повторному виклику з тими ж аргументами. Це корисно для дорогих обчислень, рекурсивних алгоритмів (наприклад, факторіал), або при рендерингу компонентів у React.

Ключові принципи

• Кеш зберігається у Map або об’єкті.
• Аргументи функції перетворюються у ключ (часто через JSON.stringify).
• Якщо ключ існує, повертається кешований результат.

Як це працює

1. Функція memoized приймає іншу функцію fn.
2. Створюється локальний кеш Map.
3. Повертається нова функція, що перевіряє кеш перед викликом fn.

Практика і реалізація

const memoized = <T extends (...args: any[]) => any>(fn: T): T => {
  const cache = new Map<string, ReturnType<T>>();
  return ((...args: Parameters<T>) => {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key) as ReturnType<T>;
    const result = fn(...args);
    cache.set(key, result);
    return result;
  }) as T;
};

const heavyCalc = (x: number) => { /* дорогий код */ return x * 2; };
const memoHeavy = memoized(heavyCalc);

Тестування

import { describe, it, expect } from 'vitest';
describe('memoized', () => {
  it('caches results', () => {
    const fn = jest.fn((x) => x + 1);
    const memoFn = memoized(fn);
    expect(memoFn(5)).toBe(6);
    expect(memoFn(5)).toBe(6); // не викликає fn
    expect(fn).toHaveBeenCalledTimes(1);
  });
});

Коли застосовувати

• Дорогі обчислення (алгоритми, запити до API).
• Функції з ідемпотентними результатами.
• Рендеринг компонентів, що залежать від стабільних пропсів (React useMemo).

Переваги

• Зменшує час виконання.
• Підвищує продуктивність UI.

Недоліки

• Додає пам’яті для кешу.
• Потрібно обробляти випадки зміни аргументів (наприклад, об’єктів з новими властивостями).