React Snippet (Visual Studio Code)
中文 README
Design Notes
Due to the React Hooks 'Functional Programming' paradigm, there is not much structural code. Especially with the React Compiler, you no longer need to manually reach for useMemo, useCallback, or React.memo, so there is very little template code remaining.
Therefore, this snippet extension only includes the following three parts:
- Functional components
- Common Hooks
- Common APIs
Snippets
(1). Functional Components
fc - React Functional Component (TypeScript)
export interface FeatureProps {
}
export default function Feature(props: FeatureProps) {
return (
);
}
rfc - React Functional Component (TypeScript)
interface FeatureProps {
}
function Feature(props: FeatureProps) {
return (
);
}
fc - React Functional Component
export default function Feature(props) {
return (
);
}
rfc - React Functional Component
function Feature(props) {
return (
);
}
- Functional Component
- React API
<Activity><Profiler><Suspense>
(2). Hooks
useCallback - useCallback >>
const handler = useCallback((param) => {}, [dependencies]);
- State Hooks
- Context Hook
- Ref Hooks
useRefuseImperativeHandle
- Effect Hooks
useEffectuseLayoutEffectuseInsertionEffectuseEffectEvent
- Performance Hooks
useMemouseCallbackuseTransitionuseDeferredValue
- Other Hooks
useActionStateuseSyncExternalStoreuseOptimistic
- Form Hooks
(3). APIs
memo >>
import { memo } from 'react';
export interface FeatureProps {
}
const Feature = memo(function Feature(props: FeatureProps) {
return (
);
});
export default Feature;
- React API
lazymemocreateContextstartTransition
- React DOM API
- Client React DOM API
If you need react-router, please install React Router Snippets.
If you need zustand + immer, please install Zustand + Immer Snippets.
License
MIT License
