Custom Hooks & Patterns in React

// Custom hook for user data
function useUser(userId: string) {
  return useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
    enabled: !!userId,
    staleTime: 1000 * 60 * 5,
  })
}

// Custom hook with mutations
function useUpdateUser() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: updateUser,
    onSuccess: (data) => {
      queryClient.setQueryData(['user', data.id], data)
      queryClient.invalidateQueries({ queryKey: ['users'] })
    }
  })
}

// Usage
function Profile({ userId }) {
  const { data: user, isLoading } = useUser(userId)
  const updateUser = useUpdateUser()

  if (isLoading) return 'Loading...'

  return (
    <div>
      <h1>{user.name}</h1>
      <button onClick={() => updateUser.mutate({ id: userId, name: 'New Name' })}>
        Update
      </button>
    </div>
  )
}