Skip to content

Commit c9927e0

Browse files
Gozalabfollington
andauthored
fix: attempt to prevent use of useReactiveCell outside of component (#1128)
* fix: update prompts * Update LLM cache --------- Co-authored-by: Ben Follington <5009316+bfollington@users.noreply.github.com>
1 parent fab9ada commit c9927e0

File tree

4 files changed

+37
-18
lines changed

4 files changed

+37
-18
lines changed

charm/src/iframe/static.ts

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,8 +125,27 @@ Create an interactive React component that fulfills the user's request. Focus on
125125
- **useReactiveCell is a React Hook** and must follow all React hook rules
126126
- It should only be used for persistent state and must draw from the provided schema
127127
- For any ephemeral state, use \`React.useState\`
128-
- Only call useReactiveCell at the top level of your function components or custom hooks
128+
- Only call useReactiveCell at the top level of your React function components or custom hooks
129129
- Do not call useReactiveCell inside loops, conditions, or nested functions
130+
- Do not call useReactiveCell directly inside the onReady function - it can only be used inside React components
131+
- The onReady function itself is not a React component and cannot use React hooks directly
132+
- Example of correct usage:
133+
\`\`\`jsx
134+
function onReady(mount, sourceData, modules) {
135+
// This is NOT a React component, so do NOT use hooks here!
136+
137+
// Create a React component to use hooks properly:
138+
function MyApp() {
139+
// React hooks can be used here
140+
const [data, setData] = useReactiveCell('myData', defaultValue);
141+
return <div>{/* your JSX */}</div>;
142+
}
143+
144+
// Render the React component to the mount point
145+
const root = ReactDOM.createRoot(mount);
146+
root.render(<MyApp />);
147+
}
148+
\`\`\`
130149
</use_reactive_cell>
131150
</charm_api>
132151

0 commit comments

Comments
 (0)