Provide React development best practices for components, hooks, and performance.
npx skills add https://github.com/ZJUxjy/opencode_lite --skill react-expert-zjuxjy
Please help me install this Agent Skill. Skill: React Expert Source: https://github.com/ZJUxjy/opencode_lite/tree/main/skills/react Command: npx skills add https://github.com/ZJUxjy/opencode_lite --skill react-expert-zjuxjy
This Skill provides comprehensive guidance on building robust and efficient React applications, covering best practices for components, hooks, state management, and performance.
useEffect dependencies and custom hooks.useMemo, useCallback, memo) effectively.useReducer.Consult the React Expert skill for guidance on implementing custom hooks in your React project.
High-intent search queries and answers about installing and using this skill.
To optimize React performance, apply memoization techniques using useMemo for expensive calculations, useCallback for stable function references, and memo for component wrapping. These prevent unnecessary re-renders when parent components update.
Manage complex React state by lifting state up to common parent components or implementing useReducer for predictable state transitions. UseReducer handles multiple interdependent values better than multiple useState hooks.
Create custom hooks in React by extracting component logic into reusable functions prefixed with 'use'. Follow hooks best practices by ensuring correct useEffect dependencies and returning necessary state or handlers for component integration.
Use useEffect in React for side effects like data fetching or subscriptions. Handle dependencies by including all external values the effect relies on to prevent stale closures and ensure synchronous rendering behavior.
Implement error boundaries in React by creating class components that catch JavaScript errors anywhere in the child component tree. This logs errors and displays fallback UI instead of crashing the entire application.
TypeScript works seamlessly with React functional components and TSX patterns. Define prop types using interfaces, apply proper props naming conventions, and leverage TypeScript for static typing across hooks and component design.
aaronmaturenConfigure strict TypeScript and ESM-ready tsconfig.json for Node.js 20+ applications.
ynittoAutomate frontend unit testing for React components and Zustand stores.
mgd34msuDevelop, document, and test UI components in isolation with Storybook.
bdbchBuild Solid.js applications with signals, effects, stores, and SolidStart.