Capitalize React concepts in docs

Summary

We should be capitalizing proper React concepts in the docs. This was flagged by @samselikoff here and I took a first pass at correct Effects, Hooks, and Transitions in https://github.com/reactjs/react.dev/pull/6712.

Remaining items

The remaining items are:

• Components (In progress: https://github.com/reactjs/react.dev/pull/6717)
• State (In progress: https://github.com/reactjs/react.dev/pull/6720)
• Actions
• Context (In progress: https://github.com/reactjs/react.dev/pull/6718)
• Suspense
• Error Boundaries (In Progress: https://github.com/reactjs/react.dev/pull/6719)
• ... more?

Submitting a PR

• Please do not ask to take an item, just submit a PR. If multiple people submit the same PR, I'll add co-author credit to the commit.

• Only submit one PR per concept

• When you submit a PR, please try and cover all usages in all the docs, on all pages excluding the blog and community pages.

• Avoid fixing one or two instances and favor full coverage to minimize the number of PRs and reviews.

Note that headings like {/* usestate */} must stay lower case, so a find and replace won't work.

Style Guide

• Capitalize React-specific concepts: Capitalize the names of React concepts and features when referring to them specifically.
• Lowercase all others: Use lowercase when these words are used in a general context or referring to their general computing or programming meaning.

Guidelines for Specific Terms

Components

• Capitalize when referring to React Components
  • ❌ Incorrect: "functional components are a core concept in React."
  • ✅ Correct: "Functional Components are a core concept in React."
• Use lowercase when discussing components in a general programming or descriptive sense
  • ❌ Incorrect: "Components should manage their own State."
  • ✅ Correct: "components should manage their own state."

State

• Capitalize when discussing React State in the context of the React system
  • ❌ Incorrect: "Create dynamic and interactive Components with state."
  • ✅ Correct: "Create dynamic and interactive Components with State."
• Use lowercase for the general concept of state
  • ❌ Incorrect: "When a component's State changes, it re-renders."
  • ✅ Correct: "When a component's state changes, it re-renders."

Effects

• Capitalize when referring to Effects used via hooks like useEffect
  • ❌ Incorrect: "Use effects to perform side effects in function components."
  • ✅ Correct: "Use Effects to perform side effects in function components."
• Use lowercase for general references to effects or side effects in programming
  • ❌ Incorrect: "Effects let you perform side Effects in function components."
  • ✅ Correct: "Effects let you perform side effects in Function Components."

Transitions

• Capitalize when discussing the specific Transition feature ("use Transitions to defer updates").
  • ❌ Incorrect: "use transitions to defer updates"
  • ✅ Correct: "use Transitions to defer updates"
• Use lowercase when referring to the general concept of transitions in UI/UX ("transition animations").
  • ❌ Incorrect: You can also add a CSS Transition to delay dimming
  • ✅ Correct: You can also add a CSS transition to delay dimming

Context

• Capitalize when discussing the specific Context feature ("use Context to share data").
  • ❌ Incorrect: "use context to share data between components"
  • ✅ Correct: "use Context to share data between Components"
• Use lowercase when the word "context" refers to the general concept of context (understand the context)
  • ❌ Incorrect: "understand the Context it's running in"
  • ✅ Correct: "understand the context it's running in"

Start with the issue's style guide, then search all documentation pages for one remaining concept such as Actions or Suspense, excluding blog and community pages. Review each usage in context because general programming terms and headings such as {/* usestate */} stay lowercase. Done means one PR covers all usages of that concept with the specified capitalization.