The difference between react hooks and components matters because it defines how you separate logic from presentation. Problem: teams mix stateful logic directly inside UI and struggle to test, reuse, and scale. Solution: put data fetching, validation, and side effects in reusable hooks; keep rendering in lean components. Value: cleaner architecture, easier testing, fewer bugs, and production-ready integration with Azure using least privilege.
The Problem
Developers often blur the line between where logic lives (hooks) and where UI renders (components). This leads to duplicated code, tangled effects, and UI tests that are slow and brittle. We need a clear pattern: hooks encapsulate logic and I/O; components focus on layout and accessibility.
Prerequisites
Node.js v20+, TypeScript 5+ with strict mode, React 19, TanStack Query v5+, Zod v3+, Azure Functions Core Tools v4+, .NET 8 SDK, Azure CLI (or azd), and a browser-compatible fetch API.
The Solution (Step-by-Step)
1) Define strict runtime and compile-time types
// src/schemas/user.ts
import { z } from "zod";
// Zod schema for runtime validation and safe parsing
export const UserSchema = z.object({
id: z.string().uuid(),
email: z.string().email(),
name: z.string().min(1),
});
export const UsersSchema = z.array(UserSchema);
export type User = z.infer<typeof UserSchema>;
2) Create a focused hook: logic, data fetching, and validation
// src/hooks/useUsers.ts
import { useMemo } from "react";
import { useQuery, QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { UsersSchema, type User } from "../schemas/user";
// Discriminated union for explicit UI states
export type UsersState =
| { status: "loading" }
| { status: "error"; error: string }
| { status: "success"; data: ReadonlyArray<User> };
// Fetch function with runtime validation and descriptive errors
async function fetchUsers(): Promise<ReadonlyArray<User>> {
const res = await fetch("/api/users", { headers: { "accept": "application/json" } });
if (!res.ok) {
// Include status for observability; avoid leaking server internals
throw new Error(`Request failed: ${res.status}`);
}
const json = await res.json();
// Validate and coerce; throws if shape is wrong
return UsersSchema.parse(json);
}
export function useUsers(): UsersState {
const { data, error, status } = useQuery({
queryKey: ["users"],
queryFn: fetchUsers,
staleTime: 60_000, // cache for 1 minute
retry: 2, // conservative retry policy
});
// Map TanStack Query status to a strict discriminated union for the UI
return useMemo((): UsersState => {
if (status === "pending") return { status: "loading" };
if (status === "error") return { status: "error", error: (error as Error).message };
// At this point data is defined and validated by Zod
return { status: "success", data: data ?? [] };
}, [status, error, data]);
}
// Optional: provide a QueryClient at the app root (copy-paste ready)
export const queryClient = new QueryClient();
// In your app root (e.g., src/main.tsx):
// import { createRoot } from "react-dom/client";
// import { QueryClientProvider } from "@tanstack/react-query";
// import { queryClient } from "./hooks/useUsers";
// import { App } from "./App";
// createRoot(document.getElementById("root")!).render(
// <QueryClientProvider client={queryClient}>
// <App />
// </QueryClientProvider>
// );
3) Keep components presentational and accessible
// src/components/UsersList.tsx
import React from "react";
import { useUsers } from "../hooks/useUsers";
// Functional component focuses on rendering and accessibility
export function UsersList(): JSX.Element {
const state = useUsers();
if (state.status === "loading") {
// Keep loading states lightweight and non-blocking
return <p role="status" aria-live="polite">Loading users...</p>;
}
if (state.status === "error") {
// Display a user-friendly message without revealing internals
return <p role="alert">Could not load users. Please try again.</p>;
}
// Success path: minimal, semantic markup
return (
<ul aria-label="Users">
{state.data.map(u => (
<li key={u.id}>{u.name} ({u.email})</li>
))}
</ul>
);
}
4) Optional Azure back end: least-privilege, Managed Identity
This example shows an Azure Functions .NET 8 HTTP API that returns users. It authenticates to Azure Cosmos DB using DefaultAzureCredential and a system-assigned Managed Identity, avoiding connection strings. Assign only the necessary RBAC role.
// FunctionApp/Program.cs (.NET 8 isolated worker)
using Azure.Identity; // DefaultAzureCredential
using Microsoft.Azure.Functions.Worker;
using Microsoft.Azure.Functions.Worker.Http;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.DependencyInjection;
using System.Net;
using Azure.Core;
using Azure.Cosmos; // Azure.Data.Cosmos alternative for .NET SDK
var host = new HostBuilder()
.ConfigureFunctionsWorkerDefaults()
.ConfigureServices(services =>
{
// Use managed identity via DefaultAzureCredential
services.AddSingleton<TokenCredential>(_ => new DefaultAzureCredential());
services.AddSingleton<CosmosClient>(sp =>
{
var credential = sp.GetRequiredService<TokenCredential>();
// Endpoint from configuration (no keys). Use App Settings.
var endpoint = Environment.GetEnvironmentVariable("COSMOS_ENDPOINT")!;
return new CosmosClient(endpoint, credential);
});
})
.Build();
await host.RunAsync();
// FunctionApp/GetUsers.cs
using Microsoft.Azure.Functions.Worker;
using Microsoft.Azure.Functions.Worker.Http;
using System.Net;
using Azure.Cosmos;
using System.Text.Json;
namespace FunctionApp;
public class GetUsers(CosmosClient cosmos)
{
// HTTP-triggered function returning JSON users
[Function("GetUsers")]
public async Task<HttpResponseData> Run(
[HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "users")] HttpRequestData req)
{
var db = cosmos.GetDatabase("app");
var container = db.GetContainer("users");
var iterator = container.GetItemQueryIterator<UserDoc>("SELECT c.id, c.email, c.name FROM c");
var results = new List<UserDoc>();
while (iterator.HasMoreResults)
{
var page = await iterator.ReadNextAsync();
results.AddRange(page);
}
var res = req.CreateResponse(HttpStatusCode.OK);
await res.WriteStringAsync(JsonSerializer.Serialize(results));
res.Headers.Add("Content-Type", "application/json");
return res;
}
}
public record UserDoc(string id, string email, string name);
Required RBAC (principle of least privilege): Assign the Function App's system-assigned identity the Cosmos DB Built-in Data Reader role scoped to the specific database or container. Avoid account-level permissions.
5) Minimal IaC for role assignment (Azure Bicep)
// main.bicep: create role assignment for Function App's managed identity
param cosmosAccountId string
param databaseRid string // scope appropriately (e.g., database or container resource ID)
param functionPrincipalId string // Function App's system-assigned identity principalId
resource roleDefinition 'Microsoft.Authorization/roleDefinitions@2022-04-01' existing = {
scope: subscription()
name: '00000000-0000-0000-0000-000000000001' // placeholder, replace with Cosmos DB Built-in Data Reader GUID
}
resource roleAssignment 'Microsoft.Authorization/roleAssignments@2022-04-01' = {
name: guid(functionPrincipalId, databaseRid, roleDefinition.name)
scope: resourceId('Microsoft.DocumentDB/databaseAccounts/sqlDatabases', cosmosAccountId, 'app')
properties: {
roleDefinitionId: roleDefinition.id
principalId: functionPrincipalId
principalType: 'ServicePrincipal'
}
}
Note: Use azd to provision and configure environment variables like COSMOS_ENDPOINT. Never embed secrets or connection strings in code.
6) Wire up the React client to the Azure Function
// src/hooks/useUsers.ts (override the URL to your deployed Function App)
async function fetchUsers(): Promise<ReadonlyArray<User>> {
const res = await fetch(import.meta.env.VITE_API_BASE + "/users", {
headers: { accept: "application/json" },
credentials: "include", // if using auth; otherwise omit
});
if (!res.ok) throw new Error(`Request failed: ${res.status}`);
const json = await res.json();
return UsersSchema.parse(json);
}
7) Testing hooks and components separately
// tests/useUsers.test.tsx
import { describe, it, expect } from "vitest";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { renderHook, waitFor } from "@testing-library/react";
import { useUsers } from "../src/hooks/useUsers";
function wrapper({ children }: { children: React.ReactNode }) {
const client = new QueryClient();
return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
}
describe("useUsers", () => {
it("returns success after fetching", async () => {
global.fetch = async () => new Response(JSON.stringify([]), { status: 200 });
const { result } = renderHook(() => useUsers(), { wrapper });
await waitFor(() => {
expect(result.current.status).toBe("success");
});
});
});
// tests/UsersList.test.tsx
import { describe, it, expect } from "vitest";
import { render, screen } from "@testing-library/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { UsersList } from "../src/components/UsersList";
function renderWithQuery(ui: React.ReactElement) {
const client = new QueryClient();
return render(<QueryClientProvider client={client}>{ui}</QueryClientProvider>);
}
describe("UsersList", () => {
it("renders loading state", () => {
renderWithQuery(<UsersList />);
expect(screen.getByRole("status")).toHaveTextContent(/loading/i);
});
});
Best Practices & Security
Hooks own side effects; components remain pure and predictable. Validate all external data with Zod and use strict TypeScript to catch issues at compile time. For Azure, prefer Managed Identity with DefaultAzureCredential and apply the smallest RBAC scope required. Keep API base URLs and configuration in environment variables managed by azd or your CI/CD system, not in source. For database reads with Entity Framework in .NET APIs, use AsNoTracking() to avoid unnecessary change tracking.
Summary
Hooks encapsulate reusable logic, I/O, and validation, while components render UI and stay testable. Strong typing with Zod and discriminated unions keeps state explicit and safe. Azure integration is secure with Managed Identity, least-privilege RBAC, and IaC via azd or Bicep.
