# Flow Reactive Screen Components

> Build reactive Flow screens where one component updates another without navigation using reactive formulas and component outputs. NOT for Aura-based screens — use flow/flow-screen-input-validation-patterns.

- Skill: `pranavnagrecha/flow-reactive-screen-components` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds add pranavnagrecha/flow-reactive-screen-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/pranavnagrecha/flow-reactive-screen-components/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: PranavNagrecha (https://skillmd.com/u/pranavnagrecha)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/pranavnagrecha/flow-reactive-screen-components

---


# Flow Reactive Screen Components

Reactive screens let one component's output drive another without navigating to a new screen. Use `{!Component_API_Name.value}` as a reference in any downstream component's attribute — Flow re-renders dependents on change. This skill shows reactive formulas, dependent picklists, and common pitfalls.

## Adoption Signals

Any screen flow that currently uses multiple Next clicks to update displayed values.

- Reactive when a downstream picklist must filter on the current value of an upstream input.
- Reactive when conditional visibility, formula recalculation, or running totals must update without page navigation.

## Recommended Workflow

1. Activate Reactive Screens via org setting (default on Winter '24+).
2. Use formula resources that reference component API names for derived values.
3. Reference `{!Source.value}` in dependent component attribute (Text, Default Value, Visibility).
4. Avoid complex loops/actions inside the screen — reactivity triggers on each change.
5. Test: tab through fields, observe updates in real time; verify mobile support.

## Key Considerations

- Not all standard screen components are reactive yet; check docs.
- Reactivity is synchronous — don't call heavy Apex actions in a reactive handler.
- Custom LWC screen components must implement `@api validate()` and emit `FlowAttributeChangeEvent` to be reactive.
- Visibility rules re-evaluate on each change.

## Worked Examples (see `references/examples.md`)

- *Live total* — Order quantity * price
- *Show/hide state field* — Country → State dependent

## Common Gotchas (see `references/gotchas.md`)

- **Heavy action in reactive** — UI freezes.
- **Custom LWC not reactive** — Doesn't update others.
- **Mobile lag** — Updates delayed.

## Top LLM Anti-Patterns (full list in `references/llm-anti-patterns.md`)

- Next clicks for trivially-derivable fields
- Heavy Apex action on every change
- Custom LWC screen without FlowAttributeChangeEvent

## Official Sources Used

- Flow Builder Guide — https://help.salesforce.com/s/articleView?id=sf.flow.htm
- Flow Best Practices — https://help.salesforce.com/s/articleView?id=sf.flow_best_practices.htm
- Reactive Screens — https://help.salesforce.com/s/articleView?id=sf.flow_ref_elements_screen_reactive.htm
- Flow HTTP Callout Action — https://help.salesforce.com/s/articleView?id=sf.flow_concepts_callout.htm