Appendices

Glossary

A list of key terms commonly used in React projects.

• Component – A reusable building block in React (function or class) that returns UI.
• Props – Inputs passed into components to configure behavior or content.
• State – Internal, mutable data managed within a component.
• Hook – A function (e.g., useState, useEffect) that lets you use state and lifecycle features inside functional components.
• Context – A way to pass data deeply through the component tree without prop drilling.
• SSR (Server-Side Rendering) – Rendering React components to HTML on the server before sending them to the client.
• SSG (Static Site Generation) – Pre-rendering pages at build time for speed and SEO.
• CSR (Client-Side Rendering) – Rendering React components fully in the browser.
• ARIA – Attributes that improve accessibility by describing roles, states, and properties of UI elements.
• Feature Flag – A toggle that enables or disables features at runtime without redeployment.
• Canary Branch – A Git branch used to test risky changes in isolation before merging.
• WCAG – Web Content Accessibility Guidelines, standards for accessible web content (A, AA, AAA levels).

Cheat sheets 

Quick reference guides for commonly used patterns, hooks, and best practices.

React hooks

• useState – Local state management.
• useReducer – Complex state logic in one component.
• useEffect – Side effects (fetching, subscriptions).
• useContext – Access shared state without prop drilling.
• useRef – Persistent values across renders; reference DOM nodes.
• useMemo – Memoize expensive calculations.
• useCallback – Memoize functions passed as props.

Accessibility checklist

• All images have appropriate alt text (or empty for decorative).
• Each page has one <h1> and structured headings.
• Links are descriptive; buttons are used only for actions.
• Forms use <label>s and aria-describedby for errors/help text.
• Components have visible focus styles.
• Tested with keyboard navigation and screen readers.
  

Performance optimization

• Use React.memo for expensive, frequently rendered components.
• Avoid unnecessary useCallback/useMemo (defensive memoization).
• Lazy load heavy components with React.lazy + Suspense.
• Monitor with React DevTools Profiler and Lighthouse.
  

Git and documentation conventions

• Commits – Follow Conventional Commits (feat:, fix:, docs:).
• Branches – type/short-description (e.g., feat/add-user-auth).
• PR Titles – Imperative, concise, and descriptive.
• Docs – Maintain README.md, CONTRIBUTING.md, and CHANGELOG.md.