Lodash - Funciones utilitarias probadas en batalla con importaciones que pueden hacer tree-shaking para aplicaciones React

# Versión de módulo ES que puede hacer tree-shaking (recomendado)
npm install lodash-es
npm install -D @types/lodash-es
 
# O versión clásica con importaciones seleccionadas
npm install lodash
npm install -D @types/lodash

// Importa funciones individuales para tree-shaking
import debounce from "lodash-es/debounce";
import groupBy from "lodash-es/groupBy";
import cloneDeep from "lodash-es/cloneDeep";
 
// O importaciones nombradas (funciona con lodash-es)
import { debounce, groupBy, cloneDeep } from "lodash-es";

// app/components/SearchWithDebounce.tsx
"use client";
import { useState, useCallback, useMemo, useEffect } from "react";
import debounce from "lodash-es/debounce";
import groupBy from "lodash-es/groupBy";
 
interface Product {
  id: number;
  name: string;
  category: string;
  price: number;
}
 
const ALL_PRODUCTS: Product[] = [
  { id: 1, name: "React Handbook", category: "books", price: 29 },
  { id: 2, name: "TypeScript Guide", category: "books", price: 35 },
  { id: 3, name: "Mechanical Keyboard", category: "electronics", price: 150 },
  { id: 4, name: "USB-C Hub", category: "electronics", price: 45 },
  { id: 5, name: "Standing Desk", category: "furniture", price: 400 },
  { id: 6, name: "Monitor Arm", category: "furniture", price: 80 },
];
 
export default function SearchWithDebounce() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<Product[]>(ALL_PRODUCTS);
 
  const searchProducts = useMemo(
    () =>
      debounce((searchQuery: string) => {
        const filtered = ALL_PRODUCTS.filter((p) =>
          p.name.toLowerCase().includes(searchQuery.toLowerCase())
        );
        setResults(filtered);
      }, 300),
    []
  );
 
  // Limpieza de debounce al desmontar
  useEffect(() => {
    return () => {
      searchProducts.cancel();
    };
  }, [searchProducts]);
 
  const handleChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setQuery(e.target.value);
      searchProducts(e.target.value);
    },
    [searchProducts]
  );
 
  const grouped = groupBy(results, "category");
 
  return (
    <div className="max-w-lg mx-auto p-6">
      <input
        value={query}
        onChange={handleChange}
        placeholder="Buscar productos..."
        className="w-full border rounded px-3 py-2 mb-4"
      />
      {Object.entries(grouped).map(([category, items]) => (
        <div key={category} className="mb-4">
          <h3 className="font-bold capitalize text-lg">{category}</h3>
          <ul className="mt-1 space-y-1">
            {items.map((item) => (
              <li key={item.id} className="flex justify-between">
                <span>{item.name}</span>
                <span className="text-gray-500">${item.price}</span>
              </li>
            ))}
          </ul>
        </div>
      ))}
      <p className="text-sm text-gray-400 mt-4">
        {results.length} resultados encontrados
      </p>
    </div>
  );
}

"use client";
import { useEffect, useState } from "react";
import throttle from "lodash-es/throttle";
 
export function useScrollPosition() {
  const [scrollY, setScrollY] = useState(0);
 
  useEffect(() => {
    const handleScroll = throttle(() => {
      setScrollY(window.scrollY);
    }, 100);
 
    window.addEventListener("scroll", handleScroll);
    return () => {
      handleScroll.cancel();
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);
 
  return scrollY;
}

import merge from "lodash-es/merge";
 
const defaultConfig = {
  theme: { colors: { primary: "#3b82f6", secondary: "#64748b" } },
  features: { darkMode: false, notifications: true },
};
 
const userConfig = {
  theme: { colors: { primary: "#ef4444" } },
  features: { darkMode: true },
};
 
const config = merge({}, defaultConfig, userConfig);
// { theme: { colors: { primary: "#ef4444", secondary: "#64748b" } },
//   features: { darkMode: true, notifications: true } }

import cloneDeep from "lodash-es/cloneDeep";
 
const original = {
  nested: { value: 42, date: new Date(), set: new Set([1, 2, 3]) },
};
 
const copy = cloneDeep(original);
copy.nested.value = 100;
console.log(original.nested.value); // 42 (sin cambios)

import pick from "lodash-es/pick";
import omit from "lodash-es/omit";
import uniqBy from "lodash-es/uniqBy";
import chunk from "lodash-es/chunk";
import get from "lodash-es/get";
 
// Selecciona claves específicas de un objeto
const user = { id: 1, name: "Alice", email: "alice@example.com", password: "secret" };
const safe = pick(user, ["id", "name", "email"]);
 
// Elimina claves
const noPassword = omit(user, ["password"]);
 
// Deduplica por una propiedad
const unique = uniqBy(users, "email");
 
// Divide array en páginas
const pages = chunk(items, 10); // [[...10], [...10], ...]
 
// Acceso seguro a propiedades profundas (considera optional chaining en su lugar)
const value = get(config, "deeply.nested.value", "default");

import type { DebouncedFunc } from "lodash-es";
 
// Función debounced explícitamente tipada
const debouncedSearch: DebouncedFunc<(query: string) => void> = debounce(
  (query: string) => {
    console.log("Buscando:", query);
  },
  300
);