C3 AI Documentation Home

Debug the front-end application

React applications on the platform combine TypeScript, metadata-driven configuration, Redux state, and custom components. These can components receive props and use hooks like useSelector, useState, and useEffect to react to changes in state and input.

When the UI doesn’t behave as expected — such as rendering blank, skipping updates, or rendering too often — you don’t need to start logging everything. Instead, Chrome DevTools provides two dedicated panels to help you debug what’s happening: Components and Redux.

These panels let you:

  • Inspect any component rendered on the page
  • View and edit props, local state, and hook values
  • Understand why a component rendered (or didn’t)
  • See every Redux action and how it changed the state

Inspect rendered UI with the Components panel

After installing the React Developer Tools extension, open DevTools and select the Components tab.

You can now:

  • Browse the live component tree
  • Search by component name (e.g., TurbineTable)
  • Select any component to inspect its internal data

The selected component shows:

SectionWhat it reveals
PropsAll external inputs, including applicationStateRef, data arrays, or handlers
HooksAll internal state and subscriptions (useState, useSelector, useEffect, etc.)
SourceThe .tsx file and line number where the component was defined

This view reflects the actual data that React used to render the component — no logging required.

Understand how props affect rendering

React re-renders components when their props or state change. Use the Components panel to verify:

  • Whether a component received updated props
  • Whether the props match the Redux state or backend data
  • Whether nested components inherited the correct values

If a component doesn’t render as expected:

  1. Find it in the Components tree
  2. Check each prop's current value
  3. Expand arrays or objects to inspect their structure
  4. Verify that props match the UI logic you defined in .c3typ or .tsx

If a prop shows undefined, trace back to the parent component and repeat.

Inspect hook state without modifying the code

Hooks power most logic in modern C3 UI apps. Use the Hooks section of the Components panel to inspect:

Hook TypeCommon Purpose
useStateToggle UI flags like modals, selections, tabs
useSelectorAccess global Redux state
useEffectRun side effects (like fetching or subscribing)

Each hook shows both the current value and the exact order it was declared in the component. Use this to understand:

  • Which state value changed and when
  • Whether useSelector returned stale or null data
  • Whether useEffect ran or skipped (by checking derived state)

You don’t need to log hook values — DevTools shows everything live.

Trace how state flows from Redux to components

If a component uses useSelector, the Redux panel helps you trace state updates.

Open the Redux panel (available when Redux DevTools is integrated into the app).

It shows:

  • A timeline of every dispatched Redux action
  • The prev state and next state after each action
  • The diff for each field that changed
  • The exact payload passed to the reducer

Example workflow:

  1. Trigger an action (e.g., a button click that dispatches FETCH_TURBINES_SUCCESS)

  2. In the Redux panel:

    • Select that action
    • View the payload under Action
    • Inspect the updated state under State
    • Use the Diff tab to see what changed

  3. Switch to the Components panel:

    • Find the component that uses useSelector
    • Confirm that it received the updated field as a prop or hook

This end-to-end tracing requires no manual logs — DevTools handles it.

Analyze rendering with “Highlight updates”

In the Components panel settings (⚙️), enable:

Highlight updates when components render

When this is on, Chrome flashes a green outline around any component that re-renders.

Use this to catch:

  • Components that re-render too often
  • Unintentional prop changes triggering extra renders
  • Expensive components that don’t memoize input properly

You can combine this with the Hooks view to verify what changed — and whether that change was necessary.

Fix over-rendering and stale props

React re-renders components only when props or state change. If you see flickering or repeated re-renders:

  • Use Highlight updates to see which component re-rendered
  • Check the Hooks section to see which useState or useSelector values changed
  • Verify that parent props didn’t change unnecessarily

If a component re-renders but none of its inputs changed, it might need to be wrapped in React.memo or optimized using useCallback and useMemo.

When a component doesn't render updated state

If the UI does not reflect the latest data, check how the component receives its inputs:

  • If the component uses props, then go to the parent component and verify it passes the correct values. Then use the Components panel to confirm that the child component receives those props.

  • If the component uses Redux application state, then open the Redux panel and confirm the correct action was dispatched. Check that the reducer updated the state. Then switch to the Components panel and inspect the selector hook (useSelector) to ensure it selects the expected slice of state.

If props and state both look correct but the UI still does not update, examine the component’s logic. Look for stale derived values, incorrect conditions, or selectors that return memoized results from previous state.

Troubleshooting checklist (without logging)

SymptomWhat to check
Component renders blankUse Components to inspect props and hooks
Backend data doesn't appearUse Redux to confirm the action and updated state
UI updates too oftenEnable Highlight updates to isolate re-renders
Component receives stale dataCompare Redux state with props in Components
Component doesn't reflect new stateConfirm dispatched actions and updated state in Redux
Was this page helpful?