Caelin Sutch caelinsutch

🚢

Shipping Product

memento mori

caelinsutch / useSaveOnChange.ts

Last active November 26, 2023 23:47

Save on Change for React Hook Form

	import debounce from "debounce";
	import { useCallback } from "react";
	import { useWatch, type UseFormReturn, type FieldValues } from "react-hook-form";
	import useDeepCompareEffect from "use-deep-compare-effect";

	export const useSaveOnChange = <T extends FieldValues = FieldValues>(
	form: UseFormReturn<T>,
	onSubmit: (data: T) => void
	) => {
	const watchedData = useWatch({

caelinsutch / useToggle.tsx

Created February 12, 2021 01:18

useToggle

	import { useState } from 'react';

	type UseToggle<T> = [T[], (item: any) => void, (items?: T[]) => void];

	const useToggle = <T = any>(defaultValues?: T[]): UseToggle<T> => {
	const [items, setItems] = useState<T[]>(defaultValues \|\| []);

	const toggleItem = (item: any) => {
	if (items.includes(item)) {
	setItems((prev) => prev.filter((i) => i !== item));

caelinsutch / useReducer.ts

Last active February 12, 2021 01:35

useReducer

	// This is gross and hard to read
	const BasicComponent = () => {
	const [isOpen, setIsOpen] = useState(false);
	const [name, setName] = useState('');
	const [isLoading, setIsLoading] = useState(false);
	const [error, setError] = useState(null);
	const [id, setid] = useState('');

	return (
	// ...

caelinsutch / BuggyComponentErrorBoundary.js

Created February 3, 2021 09:54

Buggy Component with Error Boundary

	class ErrorBoundary extends Component {
	state = {
	errorMessage: ''
	}
	static getDerivedStateFromError(error) {
	return {errorMessage: error.toString()}
	}
	componentDidCatch(error, info) {
	this.logErrorToServices(error.toString(), info.componentStack)
	}

caelinsutch / ErrorBoundary.js

Created February 3, 2021 09:51

Error Boundary (from react docs)

	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 };
	}

caelinsutch / buggycounter.jsx

Created February 3, 2021 09:48

Buggy Counter

	class BuggyCounter extends Component {
	state = {
	counter: 0
	};
	handleClick = () => {
	this.setState({
	counter: this.state.counter + 1
	});
	}
	render() {

caelinsutch / lists.tsx

Created February 1, 2021 23:30

Lists

	// Don't write lops with the rest of the code
	const Component = ({title, cards}) => {
	return <div>
	<h1>{title}</h1>
	{
	cards.map(({title: cardTitle, subtitle, image}) => ({
	<div>
	<h3>{cardTitle}</h3>
	<h5>{subtitle}</h5>
	<img src={image} />

caelinsutch / UserAccount.tsx

Created February 1, 2021 23:23

UserAccount

caelinsutch / component.tsx

Created February 1, 2021 23:20

Default Props

	// Don't define the default props outside of the function

	const Component = ({ title, subtitle, text}) => {
	return <div>..</div>
	}

	Component.defaultProps = {
	title: 'Default Title',
	subtitle: 'Generic Subtitle',
	text: ''

caelinsutch / counter.tsx

Created February 1, 2021 23:13

Counter