Pitfalls example

This RSG 2.0 SDK and SolidJS example shows a pitfall as a reproducible problem and a solution.

Purpose

This app teaches a reactivity pitfall by letting you trigger the problem on the device and compare it with the fixed version. A menu (LabelList) selects which version to render; Back returns to the menu.

The pitfall

This example covers one pitfall:

• Pitfall 1: Function calls in props (problem and solution). A reactive content() getter passed to a list re-runs whenever an unrelated signal (for example, color) changes. As a result, the getter produces new ContentNode references, and the list recreates all children. The solution avoids re-evaluating the content on unrelated updates.

Controls

You can use these remote control keys to switch between versions:

• Up, Down, and OK: Pick the problem or the solution from the menu
• Back: Return to the menu, or exit from the menu

Development

You can use these commands to build, test, and lint the example:

npx rk dev          # Build + deploy to Roku device
pnpm test           # Run tests
pnpm run lint       # Lint sources