git-agent for React

Conventional commits for React component and hook changes

git-agent understands React component structure, custom hook patterns, and context changes, producing conventional commit messages that clearly describe UI and state management updates.

diff example

diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index 2b3f8d1..9c4a7e2 100644
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -1,14 +1,28 @@
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import { authClient } from "../lib/auth";
+import type { User } from "../types";

-export function useAuth() {
-  const [user, setUser] = useState(null);
-  const [loading, setLoading] = useState(false);
+export function useAuth() {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);

-  async function login(email: string, password: string) {
+  const login = useCallback(async (email: string, password: string) => {
+    setError(null);
     setLoading(true);
-    const result = await authClient.login(email, password);
-    setUser(result.user);
-    setLoading(false);
-  }
+    try {
+      const result = await authClient.login(email, password);
+      setUser(result.user);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "login failed");
+    } finally {
+      setLoading(false);
+    }
+  }, []);

-  return { user, loading, login };
+  return { user, loading, error, login };
 }

git-agent outputrefactor(hooks): stabilise useAuth login callback and surface error state

- wrap login in useCallback to prevent child re-renders on parent updates
- add error state so components can display login failure messages
- add try/finally to guarantee setLoading(false) even on thrown errors
- strengthen types: User | null instead of null, string | null for error

The unstable login reference caused form components to re-register event
handlers on every render; useCallback with an empty dep array fixes the
identity.

Why it works for React

Separates component changes, hook changes, and test changes into distinct commits
Understands JSX and TSX syntax in diffs for accurate descriptions
Groups CSS module and styled-component changes with their component
Works with Create React App, Vite, and custom webpack setups

install

brew install gitagenthq/tap/git-agent
# inside your React project
git-agent init   # reads src/ structure to suggest component scopes

FAQ

Will git-agent separate my component logic from its styles?

When a CSS module or style file is changed alongside a component, git-agent groups them together unless the style change is clearly independent (e.g., a global theme update).

Does git-agent understand React Server Components?

The LLM understands the 'use client' / 'use server' directives and will note the component boundary type in the commit message when relevant.

Can git-agent commit Storybook story changes separately?

Yes. Files matching *.stories.tsx are treated as documentation or test artefacts and grouped into a separate docs or test commit.

What are Conventional Commits?Atomic commits explained refactor commit template