Skip to content

[internal] Add JSDoc documentation for fastComponent and fastComponentRef#3781

Draft
Copilot wants to merge 5 commits intomasterfrom
copilot/add-jsdoc-for-usestore
Draft

[internal] Add JSDoc documentation for fastComponent and fastComponentRef#3781
Copilot wants to merge 5 commits intomasterfrom
copilot/add-jsdoc-for-usestore

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Jan 17, 2026

The fastComponent and fastComponentRef wrapper functions lacked documentation explaining their performance optimization benefits, particularly the batched subscription optimization.

Changes

fastComponent documentation:

  • Explains the performance optimization via shared instance context
  • Documents how multiple useStore calls are batched into a single subscription
  • Integrates execution flow details into the performance optimization description
  • Includes requirements and best practices
  • Provides practical example showing useStore batching

fastComponentRef documentation:

  • Documents it as a convenience wrapper combining fastComponent with React.forwardRef
  • Cross-references fastComponent for performance details
  • Includes example with ref forwarding

Example

// Wrapping a component to enable optimized useStore batching
export const TooltipRoot = fastComponent(function TooltipRoot(props) {
  // These useStore calls share a single subscription
  const open = useStore(store, (state) => state.open);
  const disabled = useStore(store, (state) => state.disabled);
  const value = useStore(store, (state) => state.value);
  // ...
});

The documentation is positioned at the wrapper functions where developers will encounter it when wrapping their components, making it more discoverable and contextually appropriate. The documentation is concise and focused on explaining what the functions do and their technical implementation.

Original prompt

This section details on the original issue you should resolve

<issue_title>[docs] Add jsdoc for fast useStore</issue_title>
<issue_description>> Should we add documentation for the next person to explain when to use this and its limits?

Beyond contributor value, there also seems to be user value: in the eye of someone who is used to canonical React code, this is advanced, so it looks like an opportunity to teach them something, so to gain more trust from them in us.

Originally posted by @oliviertassinari in #3445 (comment)
</issue_description>

Comments on the Issue (you are @copilot in this section)


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@netlify
Copy link
Copy Markdown

netlify Bot commented Jan 17, 2026

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit f6ee5ec
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/696c0086be015700089680e6
😎 Deploy Preview https://deploy-preview-3781--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Co-authored-by: romgrk <1423607+romgrk@users.noreply.github.com>
@mui-bot
Copy link
Copy Markdown

mui-bot commented Jan 17, 2026

Bundle size report

Bundle Parsed size Gzip size
@base-ui/react 0B(0.00%) 0B(0.00%)

Details of bundle changes


Check out the code infra dashboard for more information about this PR.

Copilot AI changed the title [WIP] Add JSDoc comments for useStore documentation [docs] Add JSDoc documentation for useStore hook Jan 17, 2026
Copilot AI requested a review from romgrk January 17, 2026 20:56
@oliviertassinari oliviertassinari added docs Improvements or additions to the documentation. internal Behind-the-scenes enhancement. Formerly called “core”. labels Jan 17, 2026
@oliviertassinari oliviertassinari changed the title [docs] Add JSDoc documentation for useStore hook [internal] Add JSDoc documentation for useStore hook Jan 17, 2026
@romgrk
Copy link
Copy Markdown
Contributor

romgrk commented Jan 17, 2026

@copilot Revert those changes and add documentation to fastComponent and fastComponentRef instead.

Co-authored-by: romgrk <1423607+romgrk@users.noreply.github.com>
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Jan 17, 2026

@copilot Revert those changes and add documentation to fastComponent and fastComponentRef instead.

Done! Reverted the changes to useStore.ts and added comprehensive JSDoc documentation to fastComponent and fastComponentRef in fastHooks.ts instead. The documentation now explains the performance optimization, how it works, when to use it, and includes practical examples. (969013f)

Copilot AI changed the title [internal] Add JSDoc documentation for useStore hook [internal] Add JSDoc documentation for fastComponent and fastComponentRef Jan 17, 2026
Comment thread packages/utils/src/fastHooks.ts Outdated
* - Clears the instance context after rendering
*
* **When to use:**
* - Use for components that make multiple `useStore` calls (React 19+)
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot Remove the React 19 reference.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done! Removed all "React 19+" references from the documentation. (3c7b279)

Comment thread packages/utils/src/fastHooks.ts Outdated
Comment on lines +32 to +44
* **Performance Optimization:**
* Components wrapped with `fastComponent` have access to a shared "instance" context that enables
* specialized hook implementations to batch operations and reduce overhead. The primary benefit is
* with `useStore` in React 19+, where multiple store subscriptions within the same component are
* batched into a single subscription, significantly reducing re-render overhead.
*
* **How it works:**
* - Creates a stable instance object that persists across renders
* - Sets the instance as the current context before rendering
* - Calls registered "before" hooks to prepare the instance
* - Renders the component function
* - Calls registered "after" hooks to finalize instance state
* - Clears the instance context after rendering
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot Make the How it works section much more compact and integrate it to the section before.

Comment thread packages/utils/src/fastHooks.ts
Co-authored-by: romgrk <1423607+romgrk@users.noreply.github.com>
Co-authored-by: romgrk <1423607+romgrk@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Improvements or additions to the documentation. internal Behind-the-scenes enhancement. Formerly called “core”.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[internal] Add jsdoc for fast useStore

4 participants