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 (
);
}
fc-ref - React Functional Component with Ref (TypeScript)
Since React 19, ref is available as a regular prop, forwardRef is no longer needed.
import type { Ref } from 'react';
export interface FeatureProps {
ref?: Ref<HTMLDivElement>;
}
export default function Feature({ ref, ...props }: FeatureProps) {
return (
);
}
- Functional Component
- React API
<Activity><Profiler><Suspense><StrictMode>
(2). Hooks
useCallback - useCallback >>
const handler = useCallback((param) => {}, [dependencies]);
- State Hooks
- Context Hook
- Ref Hooks
useRefuseImperativeHandleref callback cleanup
- Effect Hooks
useEffectuseLayoutEffectuseInsertionEffectuseEffectEvent
- Performance Hooks
useMemouseCallbackuseTransitionuseDeferredValue
- Other Hooks
useActionStateuseSyncExternalStoreuseOptimisticuseId
- 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
createPortalflushSyncpreloadpreinitpreloadModulepreinitModulepreconnectprefetchDNS
- Client React DOM API
If you need react-router, please install React Router Snippets.
License
MIT License
