Recommended Libraries
Here is a non-exhaustive list of libraries that we recommend to default to when starting a new project and needing certain functionalities.
Why use these libraries?
Whenever possible, leverage existing, well-maintained libraries instead of writing your own utilities from scratch. This reduces bugs, improves maintainability, and saves development time.
- Don’t reinvent the wheel — check if a utility exists in a trusted library first.
- Prefer libraries that are widely used, maintained, and tested.
- Only write your own utility if there’s a specific need not covered by existing libraries.
- Search NPM for utilities or hooks that solve your problem before trying to implement it on your own first.
Strings / Formatting
// ❌ Bad: writing your own toTitleCase utility
function toTitleCase(str: string) {
return str
.toLowerCase()
.split(" ")
.map((word) => word[0].toUpperCase() + word.slice(1))
.join(" ");
}
// ✅ Good: use battle-tested library
import { toTitleCase } from "scule";
const title = toTitleCase("hello world");React Hooks
// ❌ Bad: custom debounce hook that duplicates existing solution
function useDebounce(value: string, delay: number) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => setDebouncedValue(value), delay);
return () => clearTimeout(handler);
}, [value, delay]);
return debouncedValue;
}
// ✅ Good: use battle-tested library
import { useDebounce } from "usehooks-ts";
const debouncedValue = useDebounce(value, 500);Recommended Libraries
| Use-case | Package to Use |
|---|---|
Data fetching on the client with isLoading, error, data state values | tanstack-query |
| Form validation and programming | react-hook-form |
| Full-text search across objects | fuse.js |
| Global state management | zustand |
| HTML sanitization | sanitize-html |
| Various React Hooks ie. debouncing callback functions, detecting device screen dimensions, local storage access | usehooks-ts |
String formatting ie. camelCase(), kebabCase(), titleCase() | scule |
| Data validation | zod |
| Data fetching | axios |
| Time formatting | dayjs |
| Query string state management | nuqs |
| Icon library | react-icons/lucide |
| Unit testing | vitest |
| End-to-end testing | playwright |
| Styling | tailwindcss |
| UI Library | shadcn |