react-snippets-simplified's Introduction

React-snippets: simplified

A collection of snippets without the redux/native bloat.

Made for daily use when developing react-applications.

Snippets

Snippet
`useEffect`	useEffect
`useLayoutEffect`	useLayoutEffect
`useState`	useState
`useCallback`	useCallback
`useContext`	useContext
`useMemo`	useMemo
`useRef`	useRef
`useTransition`	useTransition
`useEvent`	custom event hook
`cla`	className
`cl`	console.log

Description

useEffect

useEffect(() => {

  return () =>
}, [])

useLayoutEffect

useLayoutEffect(() => {

  return () =>
}, [])

useState

// JS
const [state, setState] = useState();

// TS
const [state, setState] = useState<type>();

useCallback

const callback = useCallback(() => {
  func(a);
}, [a]);

useContext

// JS
const context = useContext(ctx);

// TS
const context = useContext<type>(ctx);

useMemo

// JS
const value = useMemo(() => calc(a), [a]);

// TS
const value: type = useMemo(() => calc(a), [a]);

useRef

// JS
const ref = useRef(null);

// TS
const ref = useRef<type>(null);

useTransition

const [isPending, startTransition] = useTransition();

useEvent

Not used often, but when needed its a pain to boilerplate.

const callback = useCallback(() => {
  calc(a);
}, [a]);

useEffect(() => {
  window.addEventListener(event, callback);

  return () => {
    window.removeEventListener(event, callback);
  };
}, [callback]);