docs(#97): explain the Wrapper/Render (render props) pattern - #105
Conversation
- Finish the render-props-pattern-explanation.md doc Copilot started: add the full DisplayControls render-half walkthrough, correct the claim that useGetAllDeviceStateFromRoomConfiguration shares the Redux syncState guard (it uses a component-local useRef instead), note the guard is keyed by Wrapper name (not device key), and flag the setSyncStateRequested() placement inconsistency between the two walkthrough examples. - Cross-link from device-state-feedback-app-dev.md back to this doc. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Adds developer documentation to explain the Wrapper/Render (“render props”) pattern used in Mobile Control React apps, and links it from existing device-state sync documentation to guide readers toward the “once per session” approach.
Changes:
- Added a new doc describing the Wrapper vs Render responsibilities, lifecycle, and the
useStateIsSynced-based sync guard. - Added a cross-link from the device-state feedback doc to the new Wrapper/Render explanation.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| docs/render-props-pattern-explanation.md | New documentation explaining the Wrapper/Render pattern with example snippets and sync-guard details. |
| docs/device-state-feedback-app-dev.md | Adds a pointer to the new Wrapper/Render doc for “once per session” status requests. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
- Changed "From `mobile-control-cisco-navigator-momentum-ui`:" to explicitly state examples are "adapted from the separate [...] consuming app" with GitHub link - Added clarification to second walkthrough section for consistency - Addresses review feedback about potential confusion over whether example code exists in this repo Resolves confusion about example code location by making it explicit that examples are from an external repository, not a subdirectory of this repo.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
Suppressed comments (1)
Previously missed (1) — in code that hasn't changed since the last review.
docs/render-props-pattern-explanation.md:275
TechControls.tsxis referenced as an example routing file, but that file does not exist in this repository. Since this doc lives in the core library repo, either remove the reference or clarify it’s from a consuming app so readers aren’t sent to a dead filename.
- Put the `useEffect` device-key computation and `sendMessage` calls only in the Wrapper. The Render component should never call `sendMessage` to request its own initial data.
- Register only the Wrapper in routing (see `TechControls.tsx`), never the Render component directly.
…cement - Corrected caveat text that incorrectly claimed DisplayControlsWrapper calls setSyncStateRequested() inside forEach loop - Both AudioWrapper and DisplayControlsWrapper examples actually call it after the loop (correctly) - Updated text to note both examples do it right, while still explaining the pitfall of calling it inside the loop Addresses review feedback about contradictory documentation.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.
Suppressed comments (1)
Previously missed (1) — in code that hasn't changed since the last review.
docs/render-props-pattern-explanation.md:275
TechControls.tsxis referenced as an in-repo routing example, but that file does not exist in this repository. This makes the guidance hard to follow for readers; consider replacing it with a generic routing instruction (or link to an actual file/path in this repo if one exists).
- Register only the Wrapper in routing (see `TechControls.tsx`), never the Render component directly.
|
🎉 This PR is included in version 1.25.0-add-zoom.3 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 1.24.1-cache-busting.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 1.25.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Summary
Adds an explanation of the render props (Wrapper/Render) pattern and how it's used in our React apps.
docs/render-props-pattern-explanation.md— explanation of the pattern and its usagedocs/device-state-feedback-app-dev.md— cross-link to the new docCloses #97
🤖 Generated with Claude Code