Skip
Arish's avatar

21. What is Staging?

What is Staging?

The staging area (also called the "index") is a key concept in Git. It's an intermediate area where you prepare commits before permanently recording them.

The Three Areas of Git

┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ Working │ │ Staging │ │ Repository │ │ Directory │────▶│ Area │────▶│ (Commits) │ │ (Your files) │ │ (Index) │ │ │ └─────────────────┘ └─────────────────┘ └─────────────────┘ │ │ │ │ git add │ git commit │ └──────────────────────┴───────────────────────┘

Why Have a Staging Area?

1. Control What Goes Into Each Commit

bash
1# You changed 5 files, but only want to commit 2
2git add file1.js file2.js
3git commit -m "Add user authentication"
4
5# The other 3 files can go in a separate commit
6git add file3.js file4.js file5.js
7git commit -m "Update styling"

2. Review Before Committing

bash
1# Stage files
2git add .
3
4# Review what's staged
5git diff --staged
6
7# If something's wrong, unstage it
8git reset HEAD file.js

3. Build Commits Incrementally

bash
1# Work on multiple things
2# Then stage related changes together
3
4git add src/auth/*
5git commit -m "Add authentication module"
6
7git add src/ui/*
8git commit -m "Add UI components"

Staging Commands

Add Files to Staging

bash
1# Add specific file
2git add filename.js
3
4# Add multiple files
5git add file1.js file2.js file3.js
6
7# Add all files in a directory
8git add src/
9
10# Add all changed files
11git add .
12
13# Add all files (including deletions)
14git add -A

View Staged Files

bash
1# See status (staged and unstaged)
2git status
3
4# See what's staged (detailed)
5git diff --staged

Remove from Staging

bash
1# Unstage a file (keep changes)
2git reset HEAD filename.js
3
4# Or using restore (modern)
5git restore --staged filename.js
6
7# Unstage all files
8git reset HEAD

File States

Files in Git can be in these states:

1. Untracked

New files Git doesn't know about:

bash
1git status
2# Untracked files:
3#   new-file.js

2. Modified

Changed files not yet staged:

bash
1git status
2# Changes not staged for commit:
3#   modified: existing-file.js

3. Staged

Files ready to be committed:

bash
1git status
2# Changes to be committed:
3#   modified: staged-file.js

4. Committed

Files safely stored in the repository.

Staging Workflow Example

bash
1# 1. Make changes to files
2echo "New feature" >> feature.js
3
4# 2. Check status
5git status
6# Changes not staged for commit:
7#   modified: feature.js
8
9# 3. Stage the changes
10git add feature.js
11
12# 4. Check status again
13git status
14# Changes to be committed:
15#   modified: feature.js
16
17# 5. Review staged changes
18git diff --staged
19
20# 6. Commit
21git commit -m "Add new feature"

Partial Staging

Stage only parts of a file:

bash
1# Interactive staging
2git add -p filename.js
3
4# Options:
5# y - stage this hunk
6# n - don't stage this hunk
7# s - split into smaller hunks
8# e - manually edit the hunk
9# q - quit

This is useful when you have multiple unrelated changes in one file.

Common Patterns

Stage Everything

bash
1git add .
2# or
3git add -A

Stage Only Modified (Not New)

bash
1git add -u

Stage by Pattern

bash
1# All JavaScript files
2git add *.js
3
4# All files in src
5git add src/
6
7# All test files
8git add **/*.test.js

Summary

The staging area:

  • ✅ Sits between working directory and repository
  • ✅ Lets you control what goes in each commit
  • ✅ Allows reviewing before committing
  • ✅ Enables building commits incrementally
  • ✅ Supports partial file staging

Practice staging in the next exercise!