ymulenll/react17plus-snippets

React 17+/React-Query/Redux/React-Router Snippets README

Set of handy snippets for creating components using the latest syntax and best practices.

It also contains snippets for JavaScript, React-Query, Redux and React-Router.

Supports JavaScript and TypeScript files.

JavaScript Snippets

Snippet	Renders
imp	Named Import
impD	Default Import
impE	Import everything from module
impCss	Import css
impCssMod	Import css module styles
impScssMod	Import scss module styles
cl	Print to the console
clc	Print to the console from clipboard
cls	Log output to console from selected text
cd	Print to the console with dir
cdf	Print full data to the console with dir
cw	Print warning to the console
ce	Print error to the console
deso	Destructure object
desa	Destructure array
fn	Function
arrow	Arrow function
anon	Anonymous arrow function
inline	Inline arrow function with implicit return

React Snippets

Snippet	Renders
rf	React functional component
rfd	React Functional Component with default export
ra	React arrow functional component (named export)
rad	React arrow functional component (default export)
lazy	Lazy component import
eb	ErrorBoundary boilerplate
us	useState Hook
usl	useState Hook with lazy init
ured	useReducer Hook
ue	useEffect Hook
uec	useEffect Hook with clean function
ule	useLayoutEffect Hook
ulec	useLayoutEffect Hook with clean function
ucx	useContext Hook
uc	useCallback Hook
um	useMemo Hook
uref	useRef Hook
uid	useId Hook
udv	useDeferredValue Hook
ut	useTransition Hook
uses	useSyncExternalStore Hook

React-Query Snippets

Snippet	Renders
uq	useQuery Hook
umut	useMutation Hook
uqs	useQueries Hook
uiq	useInfiniteQuery Hook
uqc	useQueryClient Hook

React-Router Snippets

Snippet	Renders
unav	useNavigate Hook
uh	useHistory Hook (react-router v5)
up	useParams Hook
uloc	useLocation Hook

Redux Snippets

Snippet	Renders
usel	useSelector Hook
uselshallow	useSelector with shallow equal Hook
ud	useDispatch Hook
useStore	useStore Hook

Full Expansions

JavaScript Snippets

imp - Named Import

import { moduleName } from "module";

impD - Default Import

import moduleName from "module";

impE - Import everything from module

import * as moduleName from "module";

impCss - Import css

import "./Component.css";

impCssMod - Import css module styles

import styles from "./Component.module.css";

impScssMod - Import scss module styles

import styles from "./Component.module.scss";

cl - Print to the console

console.log(|);

clc - Print to the console from clipboard

console.log(clipboard);

cls - Log output to console from selected text

console.log("selected text");

cd - Print to the console with dir

console.dir(|);

cdf - Print full data to the console with dir

console.dir(|, { depth: null });

cw - Print warning to the console

console.warn(|);

ce - Print error to the console

console.error(|);

deso - Destructure object

const { | } = object;

desa - Destructure array

const [|] = array;

arrow - Arrow function

const func = (param) => {
  return param;
};

anon - Anonymous arrow function

(param) => {
  return param;
};

React Snippets

rf - React functional component

export function ComponentName() {
  return (
    <>
      |
    </>
  );
}

ra - React arrow functional component (named export)

export const ComponentName = () => {
  return (
    <>
      |
    </>
  );
};

rad - React arrow functional component (default export)

const ComponentName = () => {
  return (
    <>
      |
    </>
  );
};

export default ComponentName;

lazy - Lazy component import

const ComponentName = lazy(() => import("./ComponentName"));

eb - ErrorBoundary boilerplate

export class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

us - useState Hook

const [state, setState] = useState(initialState);

usl - useState Hook with lazy init

const [state, setState] = useState(() => fn);

ured - useReducer Hook

const [state, dispatch] = useReducer(reducer, initialState);

ue - useEffect Hook

useEffect(() => {
  |
}, []);

uec - useEffect Hook with clean function

useEffect(() => {
  |
  return () => {
    |
  };
}, []);

ule - useLayoutEffect Hook

useLayoutEffect(() => {
  |
}, []);

ulec - useLayoutEffect Hook with clean function

useLayoutEffect(() => {
  |
  return () => {
    |
  };
}, []);

ucx - useContext Hook

const context = useContext(Context);

uc - useCallback Hook

const memoizedCallback = useCallback(callbackFn, []);

um - useMemo Hook

const memoizedValue = useMemo(() => value, []);

uref - useRef Hook

const ref = useRef(initialValue);

uid - useId Hook

const id = useId();

udv - useDeferredValue Hook

const deferredValue = useDeferredValue(value);

ut - useTransition Hook

const [isPending, startTransition] = useTransition();

uses - useSyncExternalStore Hook

const snapshot = useSyncExternalStore(subscribeFn, getSnapshotFn, getServerSnapshotFn);

React-Query Snippets

uq - useQuery Hook

const { | } = useQuery({ queryKey: [queryKey], queryFn: queryFn });

umut - useMutation Hook

const { | } = useMutation({ mutationFn: mutationFn });

uqs - useQueries Hook

const results = useQueries(
  list.map((item) => ({
    queryKey: ["", item],
    queryFn: queryFn,
  }))
);

uiq - useInfiniteQuery Hook

const { | } = useInfiniteQuery({
  queryKey: ["key"],
  queryFn: ({ pageParam }) => queryFn,
  getNextPageParam: (lastPage) => getNextPageParam,
});

uqc - useQueryClient Hook

const queryClient = useQueryClient();

Redux Snippets

ud - useDispatch Hook

const dispatch = useDispatch();

usel - useSelector Hook

const state = useSelector((state) => state.state);

uselshallow - useSelector Hook with shallow equality check

const state = useSelector((state) => state.state, shallowEqual);

React-Router Snippets

unav - useNavigate Hook

const navigate = useNavigate();

up - useParams Hook

const { | } = useParams();

uloc - useLocation Hook

const location = useLocation();