pfftdammitchris

// Before: Multiple useState = multiple potential renders
const [user, setUser] = useState<User | null>(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState<Error | null>(null)

// Async callback triggers 3 separate updates
setLoading(true)
const userData = await api.getUser(userId)
setUser(userData)
setLoading(false)

pfftdammitchris

// After: Single useImmer = guaranteed single render per batch
import { useImmer } from 'use-immer'

const [state, updateState] = useImmer({
  user: null as User | null,
  loading: true,
  error: null as Error | null,
})

// All updates batched into ONE render

pfftdammitchris

// Before: Callback hell
function fetchUserData(userId: string, callback: (err: Error | null, data?: UserData) => void) {
  db.getUser(userId, (err, user) => {
    if (err) return callback(err)

    api.fetchPosts(user.id, (err, posts) => {
      if (err) return callback(err)

      api.fetchComments(posts[0].id, (err, comments) => {
        if (err) return callback(err)

pfftdammitchris

// Before: Callback hell
function fetchUserData(userId: string, callback: (err: Error | null, data?: UserData) => void) {
  db.getUser(userId, (err, user) => {
    if (err) return callback(err)

    api.fetchPosts(user.id, (err, posts) => {
      if (err) return callback(err)

      api.fetchComments(posts[0].id, (err, comments) => {
        if (err) return callback(err)

pfftdammitchris

// JavaScript - AI has no idea what 'user' contains
function authenticateUser(user, password) {
  // AI suggests generic code because it can only guess
  if (user && password) {
    return validatePassword(user.password, password)
  }
}

pfftdammitchris

import type { Options } from 'tsup'

const config: Options = {
  //
}

export default config

pfftdammitchris

const config: Options = {
  entry: ['src/index.ts'],
  dts: true,
  sourcemap: true,
  format: ['iife', 'cjs', 'esm'],
}

pfftdammitchris

export function sayHello() {
  console.log('hello')
}

pfftdammitchris

mkdir my-typescript-library
cd my-typescript-library

pfftdammitchris

const config: Options = {
  entry: ['src/index.ts'],
  dts: true,
  sourcemap: true,
}