caelinsutch

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

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

// 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

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

caelinsutch

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

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

caelinsutch

// 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

// Don't pass primatives
<UserAccount 
  name={user.name}
  email={user.email}
  id={user.id}
/>

// Pass objects
<UserAccount user={user} />

caelinsutch

// 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

// Short circuit operator
const Counter = ({count}) => {
  return <div>
    {count && <h1>Count: {count}</h1>}
  </div>
}