Search for a command to run...
Articles tagged with #reactjs
Phase 1: Project Setup 1.1 Initialize the Project # Create project directory mkdir my-react-library cd my-react-library # Initialize with pnpm pnpm init 1.2 Install Dependencies # Install React as peer dependencies (users will provide these) pnpm a...
What is viewBox Animation? viewBox = your camera lens <svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="20" /> </svg> The circle is always at coordinate (50,50) with radius 20. The circle never moves. But when you animate viewBox, you're chan...
❌ Wrong → Swallowing Errors function useRepos() { return useQuery({ queryKey: ['repos'], queryFn: async () => { try { const response = await fetch('/api/repos') if (!response.ok) throw new Error('Failed') retur...
Select → Useful for API Responses Most APIs return way more data than you need: // API returns huge user object const { data: userName } = useQuery({ queryKey: ['user', id], queryFn: () => fetchUser(id), // Returns 50 fields select: (user) => u...
The 6-Step Optimistic Update Pattern function useToggleTodo(id, sort) { const queryClient = useQueryClient() return useMutation({ mutationFn: () => toggleTodo(id), onMutate: async () => { // 1. Cancel outgoing queries await q...
Core Pattern: useInfiniteQuery Instead of managing page state yourself, React Query handles it: function usePosts() { return useInfiniteQuery({ queryKey: ['posts'], queryFn: ({ pageParam }) => fetchPosts(pageParam), // pageParam managed by ...
