react-best-practices

Malicious tool definition detected

Tool: SKILL.md Description: --- name: react-best-practices description: React performance optimization guidelines from Mastra Engineering.

Malicious tool definition detected

Tool: references/react-best-practices-reference.md [1/2] Description: # React Best Practices **Version 0.2.0** Mastra Engineering January 2026 > **Note:** > This document is mainly for agents and LLMs to follow when maintaining, > generating, or refactoring React codebases. Humans > may also find it useful, but guidance here is optimized for automation > and consistency by AI-assisted workflows.

Tool: references/react-best-practices-reference.md [2/2] Description: performing heavy transformations.

Malicious tool definition detected

Tool: references/rules/async-parallel.md Description: --- title: Promise.all() for Independent Operations impact: CRITICAL impactDescription: 2-10× improvement tags: async, parallelization, promises, waterfalls --- ## Promise.all() for Independent Operations When async operations have no interdependencies, execute them concurrently using `Promise.all()`.

Malicious tool definition detected

Tool: references/rules/bundle-barrel-imports.md Description: --- title: Avoid Barrel File Imports impact: CRITICAL impactDescription: 200-800ms import cost, slow builds tags: bundle, imports, tree-shaking, barrel-files, performance --- ## Avoid Barrel File Imports Import directly from source files instead of barrel files to avoid loading thousands of unused modules.

Malicious tool definition detected

Tool: references/rules/bundle-defer-third-party.md Description: --- title: Defer Non-Critical Third-Party Libraries impact: CRITICAL impactDescription: loads after hydration tags: bundle, third-party, analytics, defer --- ## Defer Non-Critical Third-Party Libraries Analytics, logging, and error tracking don't block user interaction.

Malicious tool definition detected

Tool: references/rules/client-request-dedupe.md Description: --- title: Use TanStack Query for Automatic Deduplication impact: MEDIUM-HIGH impactDescription: automatic deduplication tags: client, tanstack-query, deduplication, data-fetching --- ## Use TanStack Query for Automatic Deduplication TanStack Query enables request deduplication, caching, and revalidation across component instances.

Malicious tool definition detected

Tool: references/rules/js-length-check-first.md Description: --- title: Early Length Check for Array Comparisons impact: HIGH impactDescription: avoids expensive operations when lengths differ tags: javascript, arrays, performance, optimization, comparison --- ## Early Length Check for Array Comparisons When comparing arrays with expensive operations (sorting, deep equality, serialization), check lengths first.

Malicious tool definition detected

Tool: references/rules/js-set-map-lookups.md Description: --- title: Use Set/Map for O(1) Lookups impact: LOW-MEDIUM impactDescription: O(n) to O(1) tags: javascript, set, map, data-structures, performance --- ## Use Set/Map for O(1) Lookups Convert arrays to Set/Map for repeated membership checks.

Malicious tool definition detected

Tool: references/rules/js-tosorted-immutable.md Description: --- title: Use toSorted() Instead of sort() for Immutability impact: MEDIUM impactDescription: prevents mutation bugs in React state tags: javascript, arrays, immutability, react, state, mutation --- ## Use toSorted() Instead of sort() for Immutability `.sort()` mutates the array in place, which can cause bugs with React state and props.

Malicious tool definition detected

Tool: references/rules/rendering-animate-svg-wrapper.md Description: --- title: Animate SVG Wrapper Instead of SVG Element impact: MEDIUM impactDescription: enables hardware acceleration tags: rendering, svg, css, animation, performance --- ## Animate SVG Wrapper Instead of SVG Element Many browsers don't have hardware acceleration for CSS3 animations on SVG elements.

Malicious tool definition detected

Tool: references/rules/rendering-content-visibility.md Description: --- title: CSS content-visibility for Long Lists impact: MEDIUM impactDescription: 10× faster initial render tags: rendering, css, content-visibility, long-lists --- ## CSS content-visibility for Long Lists Apply `content-visibility: auto` to defer off-screen rendering.

Malicious tool definition detected

Tool: references/rules/rerender-lazy-state-init.md Description: --- title: Use Lazy State Initialization impact: MEDIUM impactDescription: wasted computation on every render tags: react, hooks, useState, performance, initialization --- ## Use Lazy State Initialization Pass a function to `useState` for expensive initial values.

Malicious tool definition detected

Tool: references/rules/rerender-transitions.md Description: --- title: Use Transitions for Non-Urgent Updates impact: MEDIUM impactDescription: maintains UI responsiveness tags: rerender, transitions, startTransition, performance --- ## Use Transitions for Non-Urgent Updates Mark frequent, non-urgent state updates as transitions to maintain UI responsiveness.

Malicious tool definition detected

Tool: references/rules/rerender-useeffect-function-calls.md Description: --- title: useEffectEvent when using functions in useEffect impact: MEDIUM impactDescription: unnecessary memoization when not needed tags: rerender, performance, hooks, useEffect --- ## useEffectEvent when using functions in useEffect Using `useCallback` for event handlers adds unnecessary complexity and dependency array management.