Ensure only specific modules of lodash are ever imported

This should make sure we are tree-shakable in all/most end-user
bundlers.

This is a helpful reference on this front
https://itnext.io/lodash-es-vs-individual-lodash-utilities-size-comparison-676f14b07568

I considered lodash-es, but its usage seems rarer in many existing
popular JS packages, so sticking with module-specific "lodash/foo"
imports should ensure we are tree-shakable, while also using the version
of lodash that many other packages will already have as a dependency
(and instead avoid yet another dependency being installed in end users'
projects). Also considered projects like radash, typedash, etc, but
avoiding them for the same reason as lodash-es. We do only use a couple
utils (debounce,t hrottle, omit) for what it's worth.

.eslintrc.json

@@ -93,6 +93,19 @@
         "allow": ["warn", "error"]
       }
     ],
+    "no-restricted-imports": "off",
+    "@typescript-eslint/no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "lodash",
+            "message": "Please use specific module imports like \"lodash/foo\" instead of \"lodash\".",
+            "allowTypeImports": true
+          }
+        ]
+      }
+    ],
     "react/function-component-definition": "warn",
     "react/jsx-no-useless-fragment": ["warn", { "allowExpressions": true }],
     "react-hooks/exhaustive-deps": [

src/hooks/useDebouncedFunction.ts

@@ -1,4 +1,5 @@
-import { debounce, type DebouncedFunc, type DebounceSettings } from "lodash";
+import type { DebouncedFunc, DebounceSettings } from "lodash";
+import debounce from "lodash/debounce";
 import { useEffect, useMemo, useRef } from "react";
 
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-argument */