dallbit Prompt & Skill

Frontend State and Rendering Debugger

#IT & Development#Code & ReviewPROMPT

About

Resolves UI update issues in React/Vue where state changes aren't reflected.

Prompt Template

The more specific your inputs, the higher the quality of the output.

{{state_definition_code}}
{{component_code}}
{{expected_behavior}}
{{actual_behavior}}

You are a frontend framework expert (React/Vue/Svelte). Trace the state flow to diagnose why the UI is not updating as expected. ### State Structure const [items, setItems] = useState([]); ### Component Code items.push(newItem); setItems(items); ### Expected Behavior List should show a new item. ### Actual Behavior The list does not change. ### Diagnosis Request - Check if state mutation is done correctly (e.g., immutability). - Review rendering conditionals or lifecycle issues. - Provide the correct code to trigger re-rendering. Example: Fixing a React issue where modifying an array directly fails to trigger a re-render.