React Component Architecture

App Component
State Props
Component 1
State Props
Child Component 1
State Props
Grandchild 1
State Props
Grandchild 2
State Props
Child Component 2
State Props
Component 2
State Props Reducer
Global State
Context API
Hooks
useState
useEffect
useContext
useRef
useReducer
Lifecycle
Mounting
Updating
Unmounting
 graph LR
        Components["fa:fa-puzzle-piece Components"]
        Components -->|"Class Based"| ClassComp["fa:fa-cube Class Components"]
        Components -->|"Function Based"| FuncComp["fa:fa-function Function Components"]

        Components -->|"Manages"| State["fa:fa-database State"]
        State -->|"Component State"| UseState["fa:fa-box useState Hook"]
        State -->|"Complex State"| UseReducer["fa:fa-cogs useReducer Hook"]
        State -->|"Global State"| Context["fa:fa-sitemap Context API"]

        Effects["fa:fa-sync Side Effects"]
        Effects -->|"Lifecycle"| UseEffect["fa:fa-clock useEffect Hook"]
        Effects -->|"DOM Access"| UseRef["fa:fa-link useRef Hook"]
        Effects -->|"Performance"| UseMemo["fa:fa-memory useMemo/useCallback"]

        Concepts["fa:fa-lightbulb Concepts"]
        Concepts -->|"One-way"| DataFlow["fa:fa-arrow-down Data Flow"]
        Concepts -->|"Virtual"| VDOM["fa:fa-copy Virtual DOM"]
        Concepts -->|"UI Updates"| Reconciliation["fa:fa-sync Reconciliation"]

        Components -->|"Accepts"| Props["fa:fa-arrow-right Props"]
        Props -->|"Read Only"| Immutable["fa:fa-lock Immutable"]
        Props -->|"Can Be"| PropTypes["fa:fa-check-circle PropTypes"]

        Events["fa:fa-bolt Events"]
        Events -->|"Synthetic"| SyntheticEvents["fa:fa-random Synthetic Events"]
        Events -->|"Handlers"| EventHandlers["fa:fa-code Event Handlers"]

        Styling["fa:fa-paint-brush Styling"]
        Styling -->|"CSS"| CSS["fa:fa-file-code CSS Modules"]
        Styling -->|"Inline"| Inline["fa:fa-code Inline Styles"]
        Styling -->|"CSS-in-JS"| StyledComp["fa:fa-palette Styled Components"]

        Router["fa:fa-route Routing"]
        Router -->|"Client-Side"| RouterDOM["fa:fa-map React Router"]
        Router -->|"Navigation"| Navigation["fa:fa-compass useNavigate/Link"]
        Router -->|"Parameters"| Params["fa:fa-key useParams"]

        Forms["fab:fa-wpforms Forms"]
        Forms -->|"Controlled"| Controlled["fa:fa-sliders-h Controlled Components"]
        Forms -->|"Uncontrolled"| Uncontrolled["fa:fa-toggle-off Uncontrolled Components"]
        Forms -->|"Validation"| Validation["fa:fa-check-circle Form Validation"]